diff --git a/README.md b/README.md
index f04f44ad5d7148aa5f49067968bde449c2575678..72d76dd587acda6a42199cc6b05a116fae73bf97 100644
--- a/README.md
+++ b/README.md
@@ -9,11 +9,12 @@
## 特性
-- 丰富实用的 UI 组件。
+- 企业级金融产品的交互语言和视觉体系。
+- 丰富实用的 React UI 组件。
- 基于 React 的组件化开发模式。
-- 基于 webpack 的调试构建方案,支持 ES6。
- 背靠 npm 生态圈。
-- 提炼于企业级金融产品的交互语言和视觉体系,使用 Sketch³ 设计。
+- 基于 webpack 的调试构建方案,支持 ES6。
+
## 范例
@@ -27,9 +28,12 @@ React.render(, mountNode);
## 链接
- [首页](http://ant.design/)
-- [使用文档](http://ant.design/docs/introduce)
+- [文档](http://ant.design/docs/introduce)
- [组件](http://ant.design/components/)
+- [发布计划](https://github.com/ant-design/ant-design/issues/9)
- [React 模块](http://react-component.github.io/)
+- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
+- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
## 如何贡献
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(
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/docs/introduce.md b/docs/introduce.md
index 7c04c5487cb849a2105471212a7040c097ae6c17..5a08ff3df62045c6d680d503067e33d46979b013 100644
--- a/docs/introduce.md
+++ b/docs/introduce.md
@@ -11,11 +11,12 @@
## 特性
+- 企业级金融产品的交互语言和视觉体系。
- 丰富实用的 React UI 组件。
- 基于 React 的组件化开发模式。
-- 基于 webpack 的调试构建方案,支持 ES6。
- 背靠 npm 生态圈。
-- 提炼于企业级金融产品的交互语言和视觉体系,使用 Sketch³ 设计。
+- 基于 webpack 的调试构建方案,支持 ES6。
+
## 范例
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..7a6734ec76e57c5eccfa5f70dde18295da1b9bd6 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,9 @@
"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"
+ "rc-tooltip": "~2.4.0"
},
"devDependencies": {
"css-animation": "~1.0.3",
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);
+ }
+}