diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md index c369d0afb0..5861907c29 100644 --- a/components/switch/demo/basic.md +++ b/components/switch/demo/basic.md @@ -1,8 +1,8 @@ -# 基本用法 +# 用法示例 - order: 0 -简单的 switch。 +switch 用法 --- @@ -14,5 +14,22 @@ function onChange(checked){ console.log('switch to ' + checked); } -React.render(, container); +React.render(
+

+simple:  +
  +

+

+disabled:  +
  +

+

+children:  +
  +

+

+icon children:  +} unCheckedChildren={}/> +

+
, container); ```` diff --git a/components/switch/index.md b/components/switch/index.md index 73647b67e6..330b825bad 100644 --- a/components/switch/index.md +++ b/components/switch/index.md @@ -20,4 +20,6 @@ |-----------|------------------------------------------|------------|-------|--------| | checked | 指定当前是否选中 | boolean | | false | | defaultChecked | 初始是否选中 | boolean | | false | -| onChange | 变化时回调函数 | Function(checked:boolean) | | | \ No newline at end of file +| onChange | 变化时回调函数 | Function(checked:boolean) | | | +| checkedChildren | 选中时的内容 | React Node | | | +| unCheckedChildren | 非选中时的内容 | React Node | | | \ No newline at end of file diff --git a/package.json b/package.json index d4b476e890..34a441759d 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "bugs": { "url": "https://github.com/ant-design/ant-design/issues" }, + "license": "MIT", "dependencies": { "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", @@ -23,7 +24,7 @@ "rc-progress": "~1.0.0", "rc-select": "~4.2.1", "rc-steps": "~1.1.3", - "rc-switch": "~1.1.0", + "rc-switch": "~1.2.0", "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0" }, @@ -47,6 +48,7 @@ "webpack": "^1.10.1", "webpack-dev-middleware": "^1.2.0" }, + "scripts": { "babel": "babel components --out-dir lib", "build": "npm run clean && webpack && nico build", diff --git a/style/components/switch.less b/style/components/switch.less index 21a61b80e9..cb8a365f68 100644 --- a/style/components/switch.less +++ b/style/components/switch.less @@ -1,34 +1,43 @@ @switchPrefixCls:ant-switch; +@duration:.3s; + .@{switchPrefixCls}{ position: relative; display: inline-block; - width: 38px; - height: 20px; + box-sizing: border-box; + width: 44px; + height: 22px; line-height: 20px; vertical-align: middle; border-radius: 20px 20px; - border: 1px solid #bcbcbc; - background-color: #bcbcbc; + border: 1px solid #ccc; + background-color: #ccc; cursor: pointer; - transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1); + transition: all @duration cubic-bezier(0.35, 0, 0.25, 1); + + &-inner { + color:#fff; + font-size: 12px; + position: absolute; + left:24px; + } &:after{ - display: block; position: absolute; - top: -1px; - left: -1px; - width: 20px; - height: 20px; + width: 18px; + height: 18px; + left: 2px; + top:1px; 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); + transition: left @duration cubic-bezier(0.35, 0, 0.25, 1); animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); - animation-duration: 0.3s; + animation-duration: @duration; animation-name: rcSwitchOff; } @@ -38,16 +47,22 @@ } &-checked{ - border: 1px solid #64b6f7; - background-color: #64b6f7; + border: 1px solid #87d068; + background-color: #87d068; + + .@{switchPrefixCls}-inner { + left:6px; + } &:after{ - left: 18px; + left: 22px; } } &-disabled{ cursor: no-drop; + background: #ccc; + border-color:#ccc; &:after{ background: #9e9e9e;