iswitch-core

0.1.0 • Public • Published

iswitch

一个实现Switch功能的Web组件,支持原生JavaScript及jQuery、Vue、React、Angular等框架。

效果

[图片示例待添加]

功能

  • 核心Switch效果
  • 滑动动画
  • 句柄滑动、按住效果
  • 支持change事件
  • 支持change事件
  • 支持disabledloadingreadonlystatic状态
  • 自定义设置动画尺寸颜色

实现进度

平台 包名 版本 备注
image iswitch-js 实现中...
image iswitch-vue 实现中...
image iswitch-react 实现中...
image iswitch-angular 实现中...

使用

iSwitch组件支持在多种JS框架中运行,请挑选适合你的,安装并使用她。

安装

直接在页面中引用

  • 本地引用
<!--原生JS版本-->
<script src="~/iswitch-js/dist/index.js"></script>
<!--Vue版本-->
<script src="~/iswitch-vue/dist/index.js"></script>
<!--React版本-->
<script src="~/iswitch-react/dist/index.js"></script>
<!--Angular版本-->
<script src="~/iswitch-angular/dist/index.js"></script>
  • CDN引用
<!--原生JS版本-->
<script src="~/iswitch-js/1.0.0/dist/index.js"></script>
<!--Vue版本-->
<script src="~/iswitch-vue/1.0.0/dist/index.js"></script>
<!--React版本-->
<script src="~/iswitch-react/1.0.0/dist/index.js"></script>
<!--Angular版本-->
<script src="~/iswitch-angular/1.0.0/dist/index.js"></script>

通过NPM安装

# 原生JS版本 
npm i -S iswitch-js
 
# Vue版本 
npm i -S iswitch-vue
 
# React版本 
npm i -S iswitch-react
 
# Angular版本 
npm i -S iswitch-angular

文档

组件

Props

名称 说明 类型 默认值
name 组件内部input[checkbox]name属性值 string
value 组件值 any
size 组件尺寸,可选值:small default large string default
loading 组件是否进入loading状态 boolean false
loadingText 组件进入loading状态时,显示的loading文字 string Loading...
disabled 组件是否禁用 boolean false
readonly 组件是否只读 boolean false
static 组件以静态方式渲染 boolean false
delay 滑动动画delay时间,单位毫秒 number 300
beforeChange 开关切换前执行的函数,可返回一个Promise对象,或者返回一个boolean类型的值;当返回值是true或者返回的Promiseresolve时,才会执行切换,否则不执行切换 function
onText 打开状态下显示的文字 string ON
onValue 打开状态对应的值 any true
onColor 打开状态开关颜色 string green
offText 关闭状态下显示的文字 string OFF
offValue 关闭状态对应的值 any false
offColor 关闭状态开关颜色 string red

Methods

switchOn,switchOff,switchToggle,destroy

Events

change,input

Readme

Keywords

none

Package Sidebar

Install

npm i iswitch-core

Weekly Downloads

0

Version

0.1.0

License

BSD-3-Clause

Last publish

Collaborators

  • imingyu