switch-button

Ant Design style and reactivity switch button, it can use anywhere, no framework limit.

preview

installation

yarn add switch-button

npm install switch-button

usage

/**
 * HTML
 *  <button></button>
 */
import createSwitch,{ deleteSwitch } from 'switch-button'
import 'switch-button/dist/index.css'

const ele = document.querySelector('button')

const switchBtn = createSwitch(ele, {
  onChange: (checked) => {
    console.log('checked', checked)
  },
})

// change status will update view
switchBtn.checked = true
switchBtn.loading = true
switchBtn.disabled = true

// delete switch button
deleteSwitch(ele)

the switch button is reactivity, if you change the status value, the view will automatically change.

advanced

custom text

const switchBtn = createSwitch(ele, {
  text: ['off', 'on'],
})

default value

const switchBtn = createSwitch(ele, {
  loading:true,
  checked:true
})

extend

import { extend } from 'switch-button'

const createSwitch = extend({ 
  // all class name will start with this => 'ui-switch','ui-switch-checked' ...
  prefixCls: 'ui',  
  // button role
  role: 'switch button', 
  // create small size switch button
  small: true 
})