diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md deleted file mode 100644 index 885688449..000000000 --- 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 6aa32690a..88482bea7 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 c17f48b9d..25ce0d7b0 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 7d2342805..be5042247 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 1cb807742..143c96bf1 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 9e468ba04..26d760a7a 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 8ce364812..8269fa8be 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/style/components/form.less b/style/components/form.less index 911c1b215..4957d1417 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -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,7 +65,9 @@ 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] diff --git a/style/mixins/form.less b/style/mixins/form.less index 1d32480ae..1c1ba1bee 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/themes/default/custom.less b/style/themes/default/custom.less index 1cc0a5056..1d5654098 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;