dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-06 16:20:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add select field

Browse source
This commit is contained in:
EETagent 2022-12-04 12:59:42 +01:00
parent 757e618ef4
commit eacc1d39bf
1 changed files with 45 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/lib/components/SelectField.svelte Normal file
View file

@ -0,0 +1,45 @@
<script lang="ts">
export let placeholder: string = '';
export let value: string = '';
export let error: string = '';
export let options: Array<string> = [];
</script>
<div>
<select class:error bind:value on:click on:keydown on:keyup on:change {placeholder} class:placeholder={!value}>
{#if placeholder}
<option value="" disabled selected>{placeholder}</option>
{/if}
{#each options as option}
<option value={option}>{option}</option>
{/each}
</select>
</div>
<style>
div,
input {
@apply w-full;
}
div {
@apply relative flex items-center justify-center;
}
select {
@apply hover:border-sspsBlue w-full rounded-lg border border-2 bg-[#f8fafb] p-3 text-xl shadow-lg outline-none transition-colors duration-300;
@apply min-w-40;
text-align-last: center;
}
option {
@apply w-full;
@apply text-center;
}
.placeholder {
@apply text-gray-400;
}
.error {
@apply border-red-700;
}
</style>