simple-svelte-select v1.3.6

Simple Svelte Select

Inspired by the Svelte Select

Installation

yarn add simple-svelte-select

or

npm install simple-svelte-select

Repl

Actual version

Simple example

<script>
import Select from 'simple-svelte-select';

const items = [
  { value: 'apple', label: "Tasty apple" },
  { value: 'lemon', label: "Juicy lemon" }
];

let selectedValue = items[0];
</script>

<Select items={items} bind:selectedValue={selectedValue} placeholder="Select apple or lemon"/>

Setting up

By default Select prohibits entering a search query on mobile devices (If the device width is less than 640px). You can pass the disabled property to control this yourself

//This Select does not allow you to search
<Select {items} bind:selectedValue disabled/>
//This default Select allows you to search if your device (or browser window) is wider than 640 pixels
<Select {items} bind:selectedValue/>
//This select allows you to search
<Select {items} bind:selectedValue disabled={false}/>

Async

See example in Repl

(If you need Async you'd better try svelte-select. I'm not sure if it works)

Styling

Go to the website (https://sss-configurator.web.app/). Adjust the styles there Then copy the theme Look at the picture below how to use the site

const styles = {"light":{"bgCol":"red","bCol":"yellow","cACol":"orange","bHCol":"blue","selCol":"#000","iTCol":"#3f4f5f","iS":"0 2px 3px 0 rgba(44, 62, 80, 0.24)","iHCol":"#E7F2FF","iACol":"#e2efff","iTNSCol":"#000","iATCol":"#fff","iSACol":"#007bff"},"dark":{"bgCol":"#161616","bCol":"#333","cACol":"#006fe8","bHCol":"#444","selCol":"#eee","iTCol":"#eee","iS":"0 2px 2px 0 rgba(24, 24, 24, 0.24)","iHCol":"#252525","iACol":"#323232","iTNSCol":"#eee","iATCol":"#fff","iSACol":"#414141"}}

let selectedValue;

const items = new Array(50).fill('').map((_, i) => ({ value: `item-${i + 1}`, label: `Item ${i + 1}` }))

//Then pass it into your select
<Select {items} bind:selectedValue styles={styles}/>