multi.svelte
· 1.8 KiB · Svelte
Brut
<!--For screen readers-->
<select {id} class="sr-only" multiple {required} aria-required={required} bind:value>
{#each choices as choice}
<option value={choice.value}>{choice.label}</option>
{/each}
</select>
<div class="not-sr-only">
<button
on:click={() => {
isOpen = !isOpen;
}}
class={disabled
? 'w-full text-left mx-auto flex bg-black bg-opacity-50 text-gray-100 border border-primary-200 focus:outline-none py-4 px-6 rounded-xl'
: 'w-full text-left mx-auto flex transition duration-200 hover:bg-slate-900 bg-black bg-opacity-100 text-white focus:text-primary-400 border border-primary-200 focus:border-primary-400 focus:outline-none py-4 px-6 rounded-xl'}
>
{getLabel(value)}
<!--Down arrow at end of button-->
<svg
class="w-6 h-6 ml-auto"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 12.586l-4.293-4.293-1.414 1.414L10 15.414l5.707-5.707-1.414-1.414z"
/>
</svg>
</button>
{#if isOpen}
<div
class="z-10 w-full bg-black bg-opacity-100 border border-primary-200 focus:border-primary-400 focus:outline-none rounded-xl"
>
{#each choices as choice}
<button
class={value.includes(choice.value)
? 'w-full mx-auto flex bg-primary-400 text-black border border-primary-400 focus:border-primary-400 focus:outline-none py-4 px-6 rounded-xl'
: 'w-full mx-auto flex transition duration-200 hover:bg-slate-900 text-white focus:text-primary-400 focus:border-primary-400 focus:outline-none py-4 px-6 rounded-xl'}
on:click={() => {
if (value.includes(choice.value)) {
value = value.filter((v) => v !== choice.value);
} else {
value = [...value, choice.value];
}
}}>{choice.label}</button
>
{/each}
</div>
{/if}
</div>
| 1 | |
| 2 | <!--For screen readers--> |
| 3 | <select {id} class="sr-only" multiple {required} aria-required={required} bind:value> |
| 4 | {#each choices as choice} |
| 5 | <option value={choice.value}>{choice.label}</option> |
| 6 | {/each} |
| 7 | </select> |
| 8 | |
| 9 | <div class="not-sr-only"> |
| 10 | <button |
| 11 | on:click={() => { |
| 12 | isOpen = !isOpen; |
| 13 | }} |
| 14 | class={disabled |
| 15 | ? 'w-full text-left mx-auto flex bg-black bg-opacity-50 text-gray-100 border border-primary-200 focus:outline-none py-4 px-6 rounded-xl' |
| 16 | : 'w-full text-left mx-auto flex transition duration-200 hover:bg-slate-900 bg-black bg-opacity-100 text-white focus:text-primary-400 border border-primary-200 focus:border-primary-400 focus:outline-none py-4 px-6 rounded-xl'} |
| 17 | > |
| 18 | {getLabel(value)} |
| 19 | |
| 20 | <!--Down arrow at end of button--> |
| 21 | <svg |
| 22 | class="w-6 h-6 ml-auto" |
| 23 | xmlns="http://www.w3.org/2000/svg" |
| 24 | viewBox="0 0 20 20" |
| 25 | fill="currentColor" |
| 26 | > |
| 27 | <path |
| 28 | fill-rule="evenodd" |
| 29 | d="M10 12.586l-4.293-4.293-1.414 1.414L10 15.414l5.707-5.707-1.414-1.414z" |
| 30 | /> |
| 31 | </svg> |
| 32 | </button> |
| 33 | |
| 34 | {#if isOpen} |
| 35 | <div |
| 36 | class="z-10 w-full bg-black bg-opacity-100 border border-primary-200 focus:border-primary-400 focus:outline-none rounded-xl" |
| 37 | > |
| 38 | {#each choices as choice} |
| 39 | <button |
| 40 | class={value.includes(choice.value) |
| 41 | ? 'w-full mx-auto flex bg-primary-400 text-black border border-primary-400 focus:border-primary-400 focus:outline-none py-4 px-6 rounded-xl' |
| 42 | : 'w-full mx-auto flex transition duration-200 hover:bg-slate-900 text-white focus:text-primary-400 focus:border-primary-400 focus:outline-none py-4 px-6 rounded-xl'} |
| 43 | on:click={() => { |
| 44 | if (value.includes(choice.value)) { |
| 45 | value = value.filter((v) => v !== choice.value); |
| 46 | } else { |
| 47 | value = [...value, choice.value]; |
| 48 | } |
| 49 | }}>{choice.label}</button |
| 50 | > |
| 51 | {/each} |
| 52 | </div> |
| 53 | {/if} |
| 54 | </div> |
| 55 |