svelte-switch

    0.0.5 • Public • Published

    svelte-switch

    NPM npm bundle size (minified + gzip)

    SvelteJS component for switch or toggle a boolean. User would be able to drag or click for toggling.

    Demo

    Click here for Storybook link

    REPL Link

    Installation

    npm install svelte-switch
    
    or
    
    yarn add svelte-switch
    

    Usage

    <script>
      import Switch from "svelte-switch";
    
      let checkedValue = true;
    
      function handleChange(e) {
        const { checked } = e.detail;
        checkedValue = checked;
      }
    </script>
    
    <h1>Simple usage</h1>
    Switch with default style
    <Switch on:change={handleChange} checked={checkedValue} />
    <br />
    The switch is {checkedValue ? 'on' : 'off'}.
    
    

    API

    Props

    Prop Name Description Default Value
    checked Required field undefined
    disabled false
    offColor "#888"
    onColor "#080"
    offHandleColor "#fff"
    onHandleColor "#fff"
    handleDiameter 0
    boxShadow null
    activeBoxShadow "0 0 2px 3px #3bf"
    height 28
    width 56
    id ''
    containerClass ''

    Slots

    Slot Name Description Default Set?
    checkedIcon Yes
    unCheckedIcon Yes

    Events

    Event Name Description event.detail info
    change {event: event, checked}

    Examples

    Click here to view stories implementation

    Credits

    Component is reimplementation react-switch. Complete credit goes to author and contributors of react-switch.

    License

    MIT

    Install

    npm i svelte-switch

    DownloadsWeekly Downloads

    153

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    83.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • thecodejack