@sunify/svelte-select
v1.0.0
Published
Simple select that allows you to customize button appearance
Downloads
6
Readme
svelte-select
Simple select that allows you to customize button appearance
<script>
import Select from '../src/index.svelte';
const emptyValue = '';
let value = emptyValue;
let options = [
['0', { brand: 'Shimano', material: 'Steel' }],
['1', { brand: 'Campangnolo', material: 'Alluminium' }],
['2', { brand: 'Sram', material: 'Alluminium' }],
];
</script>
<style>
.button {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
select:focus + .button {
border-color: #00f;
}
</style>
<Select
options={options}
{emptyValue}
placeholder="Freehub body"
bind:value={value}
let:currentOption
>
<slot>
<span class="button">
{currentOption.brand || currentOption} ▾
</span>
</slot>
<span slot="option" let:option>
{#if typeof option === 'object'}
{option.brand} ({option.material})
{:else}
{option}
{/if}
</span>
</Select>
Install
npm install @sunify/svelte-select
or yarn add @sunify/svelte-select
Props
options: [string, any][]
— an array of key-value pairsemptyValue: string = ''
— default value when no selected optionplaceholder: string = ''
value: string
— current option key
Slots
default
— to customize select button appearance or add anything you want to selectoption
— to customize select options (see example above)