https://github.com/zhangyu1818/switch-button

Ant Design style and reactivity switch button.
https://github.com/zhangyu1818/switch-button

ant-design button switch switch-button

Last synced: 9 months ago
JSON representation

Ant Design style and reactivity switch button.

• Host: GitHub
• URL: https://github.com/zhangyu1818/switch-button
• Owner: zhangyu1818
• Created: 2019-04-28T15:40:15.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2021-05-25T10:16:45.000Z (over 4 years ago)
• Last Synced: 2025-03-18T14:45:31.872Z (9 months ago)
• Topics: ant-design, button, switch, switch-button
• Language: TypeScript
• Homepage: https://zhangyu1818.github.io/switch-button/
• Size: 33.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# switch-button 

![npm-version](https://img.shields.io/npm/v/switch-button.svg)

[![codecov](https://codecov.io/gh/zhangyu1818/switch-button/branch/main/graph/badge.svg?token=XMOY7SVSJ4)](https://codecov.io/gh/zhangyu1818/switch-button)

![bundlesize-js-image](https://img.badgesize.io/https:/unpkg.com/switch-button/dist/index.js?label=gzip&compression=gzip&style=flat-square)

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

[preview](https://zhangyu1818.github.io/switch-button/)

## installation

```bash

yarn add switch-button

```

```bash

npm install switch-button

```

## usage

```javascript

/**

 * HTML

 *  

 */

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**

```javascript

const switchBtn = createSwitch(ele, {

  text: ['off', 'on'],

})

```

**default value**

```javascript

const switchBtn = createSwitch(ele, {

  loading:true,

  checked:true

})

```

**extend**

```javascript

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 

})

```