@beyonk/svelte-slim-select

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's onChange event
• on:beforeChange relates to SlimSelect's beforeOnChange 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.