项目作者: yairEO

项目描述 :
React Switch component based on native checkbox input, using CSS variables (custom properties) as much as possible. Easily customisable and super lightweight.
高级语言: JavaScript
项目地址: git://github.com/yairEO/ui-switch.git
创建时间: 2020-10-25T14:53:22Z
项目社区:https://github.com/yairEO/ui-switch

开源协议:MIT License

下载











ui-switch - A React component


👉 Demos: Codepen |
Codesandbox
👈









I wanted a solid, beautiful Switch component, with absolutly minimal footprint.

I did not want to install a full components-lib, even if I would be using only a single component, I wanted it to be really lightweight
but also highly customizable, and CSS variables are perfect for this, since they are much better than pre-compiled variabled, since they
are computed on-the-fly, the CSS itself if kept to a minimum, when wanted to create different design versions of the Switch component.

Install:

  1. npm i @yaireo/ui-switch

Usage

  1. import Switch from '@yaireo/ui-switch'
  2. import '@yaireo/ui-switch/src/switch.scss'
  3. // or the pre-compiled CSS:
  4. // import '@yaireo/ui-switch/dist/switch.css'
  1. // use in JSX:
  2. <form>
  3. <Switch checked={checked} onChange={onSwitchChange}></Switch>
  4. <Switch textRight>Label on the right</Switch>
  5. <Switch disabled checked>Disabled</Switch>
  6. <Switch indeterminate>Indeterminate</Switch>
  7. <Switch style={{'--size':'12px', '--thumb-scale':2.2, 'thumb-color-on':'green'}}>Inline styles</Switch>
  8. </form>

Compile source:

  1. > npm install
  2. > gulp