diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md deleted file mode 100644 index 8856884495caa0a90047fcce1df37cab4c95953a..0000000000000000000000000000000000000000 --- a/components/form/demo/basic.md +++ /dev/null @@ -1,31 +0,0 @@ -# 基本使用 - -- order: 0 - -为了获得更好的排列，请将 `label` 标签和 ``、`

随便写点什么吧

-
+
diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md index 6aa32690ada0f575e6551c82b11afd2a4d6039da..88482bea77614f9da0c0a903da1a2993038792e4 100644 --- a/components/form/demo/inline-form.md +++ b/components/form/demo/inline-form.md @@ -1,6 +1,6 @@ # 行内排列的表单 -- order: 2 +- order: 1 在**视口宽度大于等于 768px **时，你可以为 `
` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。 diff --git a/components/form/demo/input-size.md b/components/form/demo/input-size.md index c17f48b9dcb508fc88567ef2353d9bd09067a511..25ce0d7b0d65f10de3e1b7c2135c31ea38909aab 100644 --- a/components/form/demo/input-size.md +++ b/components/form/demo/input-size.md @@ -1,57 +1,24 @@ # Input 尺寸 -- order: 7 +- order: 6 -关于尺寸，我们为 `.ant-input` `.ant-input-group` 均提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名后添加后缀即可。 +我们为定义了 `.ant-input` 类的输入框提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名添加以上后缀即可。 -但是在 `` 表单里面，我们只使用**大尺寸**作为唯一的尺寸。 +但是在 `` 表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。 --- ````html -

input

- - -
- - -
- - -

input-group

- -
- -
- +
+
+
-
- -
- -
- -
- +
+
-
- -
- -
- -
- +
+
diff --git a/components/form/demo/inputs.md b/components/form/demo/inputs.md index 7d23428055b337b42987a9a012d0a4b01342580f..be504224797cc93c6a821ef84fa5b11a40de9636 100644 --- a/components/form/demo/inputs.md +++ b/components/form/demo/inputs.md @@ -1,6 +1,6 @@ # Input 输入框集合 -- order: 6 +- order: 5 使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的 Input 输入框。 diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md index 1cb807742f6e578fdf47941bc3c4da5edb014c5c..08384b7f542fe1b1a58f79819ed0ebb476909394 100644 --- a/components/form/demo/mix.md +++ b/components/form/demo/mix.md @@ -1,8 +1,8 @@ # 表单组合 -- order: 8 +- order: 7 -展示和表单相关的其他 ant-design 组件。 +集中营，展示和表单相关的其他 ant-design 组件。 --- @@ -78,25 +78,25 @@ React.render(
-
+

--

-
+
-
+

--

-
+
diff --git a/components/form/demo/validate.md b/components/form/demo/validate.md index 9e468ba04085eeb0c85a5e64e8b63c3cc1a2e9c6..26d760a7a18ded41883826d6e31ca5651a75b38b 100644 --- a/components/form/demo/validate.md +++ b/components/form/demo/validate.md @@ -1,6 +1,6 @@ # 校验提示 -- order: 5 +- order: 4 我们为表单控件的校验状态定义了样式，共有三种校验状态类： @@ -15,23 +15,23 @@ --- ````html -

校验提示

+

不带反馈图标的校验提示


-
- - -
- -
- - -
请输入数字和字母组合
-
- -
- - -
+ +
+ +
+ +
请输入数字和字母组合
+
+
+
+ +
+ +
+
+

带图标的校验提示（水平排列的表单）


diff --git a/components/form/index.md b/components/form/index.md index 8ce3648126211c4173ae864dc9db373608be3d85..8269fa8bed69bf28118f121458f7f5e9daced671 100644 --- a/components/form/index.md +++ b/components/form/index.md @@ -11,7 +11,7 @@ ### 表单 -除了默认的排列方式，我们还为 `form` 提供了以下两种排列方式： +我们为 `form` 提供了以下两种排列方式： - 水平排列：`.ant-form-horizontal` 类可以实现 `label` 标签和表单控件的水平排列; - 行内排列：`.ant-form-inline` 类可使其表现为 inline-block 级别的控件。 diff --git a/components/steps/demo/custom-icon.md b/components/steps/demo/custom-icon.md index 3400201cf75c517de0cfa6cc38ca85fc41e2739e..ed80fcf33fd702fb115e08744f4c6afe3489d5f3 100644 --- a/components/steps/demo/custom-icon.md +++ b/components/steps/demo/custom-icon.md @@ -1,4 +1,4 @@ -# 自定义图标步进条 +# 自定义图标步骤条 - order: 2 @@ -25,12 +25,11 @@ var Steps = antd.Steps; var Step = Steps.Step; var container = document.getElementById('components-steps-demo-custom-icon'); -var imgIcon =
React.render(
}> - +
}>
}> , container); ```` diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md index f02df4f7352f34a0cdc0d6a9c18fd78de9e5b936..eb7c49c366195065c813bf599f1689526e264d77 100644 --- a/components/steps/demo/simple.md +++ b/components/steps/demo/simple.md @@ -21,8 +21,8 @@ var steps = [{ description: '这里是多信息的耶哦耶哦哦耶哦耶哦耶哦耶哦耶' }, { status: 'wait', - title: '待运行', - description: '这里是多信息的描述啊描述啊描述啊' + title: '又一个待运行', + description: '描述啊描述啊' }, { status: 'wait', title: '待运行', diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md index b9bbb7d0a37c711a377796bcb11fd9270fd45a0a..571f3a69eb3ed165bee74226b66cbbbae19264a2 100644 --- a/components/steps/demo/small-size.md +++ b/components/steps/demo/small-size.md @@ -2,7 +2,7 @@ - order: 1 -迷你版的步进条，通过设置``启用. +迷你版的步骤条，通过设置``启用. --- diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md index 8cc2102b8e2d83419235b3342848e8d4d165ecf3..f5aaf8c3f7509073a4604521167e9fa31395cb6b 100644 --- a/components/steps/demo/step-next.md +++ b/components/steps/demo/step-next.md @@ -59,9 +59,6 @@ var MyForm = React.createClass({ > })}
-
表单输入A：
-
表单输入B：
-
表单输入C：
下一步
) } diff --git a/components/steps/index.jsx b/components/steps/index.jsx index ae66bef97ee3cb3887f4bbf5ec16d323163e34e1..a7d53494c46ee52e49df9428b0ad6b13d90b1f37 100644 --- a/components/steps/index.jsx +++ b/components/steps/index.jsx @@ -7,11 +7,14 @@ var AntSteps = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-steps', - size: 'default' + size: 'default', + maxDescriptionWidth: 100 }; }, render() { - return ( + return ( {this.props.children} ); } diff --git a/components/steps/index.md b/components/steps/index.md index 878a0ea3250498216e0603b7479fba4a66d55307..893ca2848c0ba3e098ba1b60007e17d19489dc57 100644 --- a/components/steps/index.md +++ b/components/steps/index.md @@ -17,15 +17,16 @@ ### Steps -步进条的整体 +步骤条的整体 | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| | size | 可选参数，指定大小（目前只支持普通和迷你两种大小） | string | small, default | default | +| maxDescriptionWidth | 可选参数，指定步骤的详细描述文字的最大宽度 | number | 无 | 100 | ### Steps.Step -步进条的每一个步 +步骤条的每一个步 | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| diff --git a/package.json b/package.json index 1ade6a3a0157ad30f706268f0e6f7ba0c96e7d57..0a72c141f10a00168d9d6fff16a5d2ec5ea76375 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "rc-menu": "~3.4.0", "rc-progress": "~1.0.0", "rc-select": "~4.0.0", - "rc-steps": "~1.1.0", + "rc-steps": "~1.1.2", "rc-tabs": "~5.1.0", "rc-tooltip": "~2.2.3" }, diff --git a/static/style.css b/static/style.css index 36d335ac6913c69d89bb1e9465d8c2bac615bbc1..0b91defe9164da43d7fce5b349f47670864b7f26 100644 --- a/static/style.css +++ b/static/style.css @@ -609,6 +609,8 @@ footer ul li > a { .markdown > table th { white-space: nowrap; + color: #5C6B77; + font-weight: 600; } .markdown > table th, @@ -1626,6 +1628,8 @@ footer ul li > a { .component-demos { margin: 2em 0 1em; + color: #5C6B77; + font-weight: 600; } .component-demos .icon-all { diff --git a/style/components/button.less b/style/components/button.less index 18d82e8a7b491e5329eeb79d6b46b79bcf4a35c7..4fb5d5ca8292ff5b469834de8b682c58fc051dd6 100644 --- a/style/components/button.less +++ b/style/components/button.less @@ -41,12 +41,12 @@ &-menu { > .@{iconfont-css-prefix} { top: -1px; - font-size: 12px; + font-size: @font-size-base; font-size: ~"10px \9"; // ie8-9 .scale(0.83); :root & { - font-size: 12px; // reset ie9 and above + font-size: @font-size-base; // reset ie9 and above } } } diff --git a/style/components/datepicker/Picker.less b/style/components/datepicker/Picker.less index c6a5e9e37ea17f28f8fac6eb77f6dacf45db6d56..1e9f39b0e911b112f62d03b541c9489873bf601e 100644 --- a/style/components/datepicker/Picker.less +++ b/style/components/datepicker/Picker.less @@ -10,6 +10,7 @@ .@{prefixCalendarClass}-picker { position: relative; display: inline-block; + &-input { .input; } @@ -20,10 +21,10 @@ .transition(all .3s @ease-in-out); width: 14px; height: 14px; - right: 14px; + line-height: 14px; + right: 8px; color: #999; top: 50%; - line-height: 1; margin-top: -7px; &:after { content: "\e60c"; @@ -40,4 +41,7 @@ border-color: #23c0fa; box-shadow: 0 0 3px #23c0fa; } + .ant-form-item &-input { + height: 32px; + } } diff --git a/style/components/form.less b/style/components/form.less index 911c1b215072039c6ef5a9301c895b611e370399..6cd40116ca7419c995dc9142eda3ed84cb234fe2 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -11,13 +11,13 @@ label { content: "*"; color: @label-required-color; font-family: SimSun; - font-size: 12px; + font-size: @font-size-base; .translate3d(-10px; 0; 0); } > .@{iconfont-css-prefix} { vertical-align: top; - font-size: 12px; + font-size: @font-size-base; } } @@ -52,7 +52,7 @@ label { form { .@{css-prefix}input { height: @input-height-lg; - font-size: 12px; + font-size: @font-size-base; padding: @input-padding-horizontal; } .has-feedback { @@ -65,14 +65,17 @@ form { .@{css-prefix}input-group > .@{css-prefix}input, .@{css-prefix}input-group > .@{css-prefix}input-group-addon, .@{css-prefix}input-group > .@{css-prefix}input-group-btn > .input-btn { - .input-lg(); + height: @input-height-lg; + font-size: @font-size-base; + padding: @input-padding-horizontal; } // input[type=file] .@{css-prefix}upload { - height: 32px; - font-size: 12px; - padding: 7px; + padding-top: 7px; + padding-bottom: 7px; + max-height: 32px; + font-size: @font-size-base; } } @@ -231,7 +234,7 @@ input[type="checkbox"] { margin: 0!important; padding-top: 7px; padding-bottom: 7px; - font-size: 12px; + font-size: @font-size-base; height: @input-height-lg; } @@ -254,6 +257,6 @@ input[type="checkbox"] { } .@{css-prefix}form-explain { display: block; - font-size: 12px; + font-size: @font-size-base; } diff --git a/style/components/steps.less b/style/components/steps.less index a75d70b7fac9e3df07af9f88a017131e8d8c81c7..7f8d79554dfb5722191d11ce0d085434a0a388a2 100644 --- a/style/components/steps.less +++ b/style/components/steps.less @@ -18,7 +18,7 @@ display: inline-block; &.@{stepsPrefixClass}-status-wait { - .@{stepsPrefixClass}-head { + .@{stepsPrefixClass}-head-inner { border-color: @wait-color; background-color: #fff; @@ -28,7 +28,7 @@ } } &.@{stepsPrefixClass}-status-process { - .@{stepsPrefixClass}-head { + .@{stepsPrefixClass}-head-inner { border-color: @active-color; background-color: @active-color; @@ -38,17 +38,20 @@ } } &.@{stepsPrefixClass}-status-finish { - .@{stepsPrefixClass}-head { + .@{stepsPrefixClass}-head-inner { border-color: @active-color; background-color: #fff; > .@{stepsPrefixClass}-icon { color: @active-color; } } + .@{stepsPrefixClass}-tail > i { + background-color: @active-color; + } } &.@{stepsPrefixClass}-custom { - .@{stepsPrefixClass}-head { + .@{stepsPrefixClass}-head-inner { background: none; border: 0; } @@ -61,19 +64,24 @@ } - .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main, .@{stepsPrefixClass}-tail { + .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main { + position: relative; display: inline-block; vertical-align: top; - } .@{stepsPrefixClass}-head { + background: #fff; + } + + .@{stepsPrefixClass}-head-inner { + display: block; border:2px solid @wait-color; width: 24px; height: 24px; - line-height: 24px; + line-height: 22px; text-align: center; border-radius: 24px; - font-size: 13px; + font-size: 14px; margin-right: 12px; .transition(background-color 0.1s ease); .transition(border-color 0.1s ease); @@ -87,7 +95,6 @@ } } .@{stepsPrefixClass}-main { - max-width: 75px; margin-top: 3px; } .@{stepsPrefixClass}-title { @@ -95,14 +102,23 @@ margin-bottom: 4px; color: #666; font-weight: bold; + background: #fff; + display: inline-block; + padding-right: 10px; + } + .@{stepsPrefixClass}-item-last { + .@{stepsPrefixClass}-title { + padding-right: 0; + } } .@{stepsPrefixClass}-description { font-size: 12px; color: #999; } .@{stepsPrefixClass}-tail { - width: 0; - position: relative; + position: absolute; + left: 0; + width: 100%; top: 12px; padding:0 10px; > i { @@ -115,19 +131,17 @@ } &.@{stepsPrefixClass}-small { - .@{stepsPrefixClass}-head { + .@{stepsPrefixClass}-head-inner { border:1px solid @wait-color; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 18px; - font-size: 10px; + font-size: 12px; margin-right: 10px; - } .@{stepsPrefixClass}-main { - max-width: 75px; margin-top: 0; } .@{stepsPrefixClass}-title { @@ -151,13 +165,7 @@ } } - &.@{stepsPrefixClass}-init, &.@{stepsPrefixClass}-init.@{stepsPrefixClass}-small { - .@{stepsPrefixClass}-tail { - padding: 0; - } - } - - &.@{stepsPrefixClass}-small .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head { + &.@{stepsPrefixClass}-small .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head-inner, .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head-inner { width: inherit; height: inherit; line-height: inherit; diff --git a/style/mixins/form.less b/style/mixins/form.less index 1d32480ae0d2034901f87181680eca6f6a6c15c4..1c1ba1bee3002ac18e110ffcce48df7fe8a476e4 100644 --- a/style/mixins/form.less +++ b/style/mixins/form.less @@ -41,7 +41,7 @@ width: 100%; padding: 0; margin-bottom: 20px; - font-size: (@font-size-base * 1.5); + font-size: 14px; line-height: inherit; color: @legend-color; border: 0; diff --git a/style/mixins/input.less b/style/mixins/input.less index 04f47d669a3337df9b775a07d5bce57b60748ac3..aee2cfd0e0902d5208d9e4ab8d6384e4cac08519 100644 --- a/style/mixins/input.less +++ b/style/mixins/input.less @@ -16,7 +16,6 @@ position: relative; display: inline-block; padding: @input-padding-vertical-base @input-padding-horizontal; - margin-right: 8px; width: 100%; cursor: text; height: @input-height-base; diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index 1cc0a505630472d92d97ee7b8376c3dd8711ae73..1d565409816b0e950a23a1b338dfe12b3c1738ed 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -107,8 +107,8 @@ // Form // -------------------------------- // Legend -@legend-color : #222; -@legend-border-color : #e5e5e5; +@legend-color : #999; +@legend-border-color : #d9d9d9; // Label @label-required-color : #F60; @label-color: #999;