@beyonk/svelte-slim-select
v0.4.1
Published
<p align="center"> <img width="186" height="90" src="https://user-images.githubusercontent.com/218949/44782765-377e7c80-ab80-11e8-9dd8-fce0e37c235b.png" alt="Beyonk" /> </p>
Downloads
17
Keywords
Readme
Svelte Slim Select
Svelte ready Select component which is built upon Slim Select
Demo
To run a demo, check this project out and run npm run dev
Usage
To use within a Svelte application:
npm i -D @beyonk/svelte-slim-select
import SlimSelect from '@beyonk/svelte-slim-select'
import 'slim-select/dist/slimselect.css' // or from a cdn as per slim-select docs.
export default {
components: {
Carousel,
Slide
}
}
Usage
<SlimSelect {data} {searchingText} {allowDeselect} />
<script>
export default {
data () {
return {
searchingText: 'Searching...',
allowDeselect: true,
data: {
label: 'Animals',
options: [
{text: 'Cat'},
{text: 'Dog'},
{text: 'Bird'}
]
}
}
}
}
</script>
To make your life easy, all component options are those directly from [http://slimselectjs.com/options](The original documentation).
Events
You have two events:
on:change
relates to SlimSelect'sonChange
eventon:beforeChange
relates to SlimSelect'sbeforeOnChange
event
<SlimSelect on:change="doSomething()" on:beforeChange="doOtherThing()" />
Select types
You can create a multi-select by sending the multiple: true
property to the component:
<SlimSelect multiple="true" />
Thanks
Huge thanks to Nick A Walsh for his original carousel, Rich Harris for his immense work on Svelte, and Stu Plumbley for his limitless flexbox expertise.