diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 08384b7f542fe1b1a58f79819ed0ebb476909394..2f2e0269ae60912c182cd9b268e9ed6eb747196f 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -11,6 +11,7 @@ var Select = antd.Select; var Option = Select.Option; var InputNumber = antd.InputNumber; var Datepicker = antd.Datepicker; +var Switch = antd.Switch; function handleSelectChange(value) { @@ -44,7 +45,7 @@ React.render(
-

请填写 switch

+
diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md new file mode 100644 index 0000000000000000000000000000000000000000..c369d0afb0e3ff0634092e59d0c5af92dd3b1f67 --- /dev/null +++ b/components/switch/demo/basic.md @@ -0,0 +1,18 @@ +# 基本用法 + +- order: 0 + +简单的 switch。 + +--- + +````jsx +var Switch = antd.Switch; +var container = document.getElementById('components-switch-demo-basic'); + +function onChange(checked){ + console.log('switch to ' + checked); +} + +React.render(, container); +```` diff --git a/components/switch/index.jsx b/components/switch/index.jsx index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..b4e8f54d9978061da83cba0605ed27d4d2119a23 100644 --- a/components/switch/index.jsx +++ b/components/switch/index.jsx @@ -0,0 +1,15 @@ +var Switch = require('rc-switch'); +var React = require('react'); + +var AntSwitch = React.createClass({ + getDefaultProps() { + return { + prefixCls: 'ant-switch' + }; + }, + render() { + return ; + } +}); + +module.exports = AntSwitch; diff --git a/components/switch/index.md b/components/switch/index.md index 9e78b5da82ff4b2de705a108ba9c679056ff7a80..73647b67e62501efe7dd8cde5bae5ac47c15f2cf 100644 --- a/components/switch/index.md +++ b/components/switch/index.md @@ -11,3 +11,13 @@ - 需要表示开关状态/两种状态之间的切换时; - 和 `checkbox `的区别是,切换 `switch` 会直接触发状态改变,而 `checkbox` 一般用于状态标记,需要和提交操作配合。 + +## API + +### Switch + +| 参数 | 说明 | 类型 | 可选值 |默认值 | +|-----------|------------------------------------------|------------|-------|--------| +| checked | 指定当前是否选中 | boolean | | false | +| defaultChecked | 初始是否选中 | boolean | | false | +| onChange | 变化时回调函数 | Function(checked:boolean) | | | \ No newline at end of file diff --git a/index.js b/index.js index 5e640ea77efae91b99f318dfc49dd7bdea3036f5..b4694670075bde6bcb5c6c594324007dd94a3cfc 100644 --- a/index.js +++ b/index.js @@ -14,7 +14,8 @@ var antd = { Popconfirm: require('./components/popconfirm'), confirm: require('./components/modal/confirm'), Steps: require('./components/steps'), - InputNumber: require('./components/input-number') + InputNumber: require('./components/input-number'), + Switch: require('./components/switch') }; module.exports = antd; diff --git a/package.json b/package.json index 4019050ab2fbcc45647cdd1c4b9532953e4bf890..0330ab204ee91398459b4862536e2175bf997d4d 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "rc-progress": "~1.0.0", "rc-select": "~4.0.0", "rc-steps": "~1.1.3", + "rc-switch": "~1.1.0", "rc-tabs": "~5.1.0", "rc-tooltip": "~2.3.0" }, diff --git a/style/components/index.less b/style/components/index.less index 5729dcb2f9083720d20df7974cc024f27e4cdab2..2b88bf6cae2e874ab44b30298c729cd322c04250 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -1,4 +1,5 @@ @import "button"; +@import "switch"; @import "dropdown"; @import "progress"; @import "select"; diff --git a/style/components/switch.less b/style/components/switch.less new file mode 100644 index 0000000000000000000000000000000000000000..21a61b80e9327c5664a5bcd2c04973a934a0c3c5 --- /dev/null +++ b/style/components/switch.less @@ -0,0 +1,94 @@ +@switchPrefixCls:ant-switch; + +.@{switchPrefixCls}{ + position: relative; + display: inline-block; + width: 38px; + height: 20px; + line-height: 20px; + vertical-align: middle; + border-radius: 20px 20px; + border: 1px solid #bcbcbc; + background-color: #bcbcbc; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1); + + &:after{ + display: block; + position: absolute; + top: -1px; + left: -1px; + width: 20px; + height: 20px; + border-radius: 50% 50%; + background-color: #ffffff; + content: " "; + cursor: pointer; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); + transform: scale(1); + transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1); + animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); + animation-duration: 0.3s; + animation-name: rcSwitchOff; + } + + &:hover:after{ + transform: scale(1.1); + animation-name: rcSwitchOn; + } + + &-checked{ + border: 1px solid #64b6f7; + background-color: #64b6f7; + + &:after{ + left: 18px; + } + } + + &-disabled{ + cursor: no-drop; + + &:after{ + background: #9e9e9e; + animation-name: none; + cursor: no-drop; + } + + &:hover:after{ + transform: scale(1); + animation-name: none; + } + } + + &-label { + display: inline-block; + line-height: 20px; + font-size: 14px; + padding-left: 10px; + vertical-align: middle; + white-space: normal; + pointer-events: none; + user-select: text; + } +} + +@keyframes rcSwitchOn { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.25); + } + 100% { + transform: scale(1.1); + } +} +@keyframes rcSwitchOff { + 0% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +}