switch-button
TypeScript icon, indicating that this package has built-in type declarations

2.1.0 • Public • Published

switch-button

npm-version codecov bundlesize-js-image

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 
})

Package Sidebar

Install

npm i switch-button

Weekly Downloads

17

Version

2.1.0

License

MIT

Unpacked Size

28.1 kB

Total Files

12

Last publish

Collaborators

  • zhangyu1995