diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md new file mode 100644 index 0000000000000000000000000000000000000000..a6f5a708193c48ea4c82113026fd64bc7a6c5ea2 --- /dev/null +++ b/components/form/demo/basic.md @@ -0,0 +1,30 @@ +# Basic from + +- order: 1 + +表单基本实例 + +`.ant-input` 类为 ``、` + +

select 下拉列表

+ + +

checkbox 复选框

+
+ +
+ +
+ +
+ + + + + + +

radio 单选框

+
+ +
+
+ +
+ +
+ +
+ + + + + +```` diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md new file mode 100644 index 0000000000000000000000000000000000000000..2fa14116f775a08318fd043bf55ffa74213b6490 --- /dev/null +++ b/components/form/demo/horizontal-form.md @@ -0,0 +1,34 @@ +# Horizontal form + +- order: 2 + +水平排列的表单 + +为 `
` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 row)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平并排排列。 + +--- + +````html + +
+ +
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+ +
+```` diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md new file mode 100644 index 0000000000000000000000000000000000000000..dc0494a7aabb86362de04f73e869e912c70b7b7e --- /dev/null +++ b/components/form/demo/inline-form.md @@ -0,0 +1,23 @@ +# Horizontal form + +- order: 3 + +内联的表单 + +在**视口宽度大于等于 768px **时，你可以为 `
` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。 + +--- + +````html + +
+ + +
+
+ + +
+ +
+```` diff --git a/components/form/demo/input-group.md b/components/form/demo/input-group.md new file mode 100644 index 0000000000000000000000000000000000000000..609459a64f3cc187e52857b5113ca978b48a405d --- /dev/null +++ b/components/form/demo/input-group.md @@ -0,0 +1,60 @@ +# Input group + +- order: 9 + +输入框组合 + + + +--- + +````html +

带标签的输入框

+
+ Http:// + +
+
+
+ + .com +
+
+
+ Http:// + + .com +
+ +

作为额外元素的按钮式下拉菜单

+
+ +
+ +
+
+ +

带按钮的菜单

+
+ +
+ +
+
+ +

微调输入框

+
+ +
+ + +
+
+```` diff --git a/components/form/demo/sizing.md b/components/form/demo/sizing.md new file mode 100644 index 0000000000000000000000000000000000000000..0bbdaffc001acb75e31b886fcc15acc7858ee76c --- /dev/null +++ b/components/form/demo/sizing.md @@ -0,0 +1,61 @@ +# Sizing options + +- order: 10 + +关于尺寸，我们提供大、中、小三种尺寸，默认为中尺寸。 + +待续... + +--- + +````html +

input

+ + +
+ + +
+ + + +

input-group

+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+ +

form-item

+故事未完待续... + +```` diff --git a/components/form/demo/static-control.md b/components/form/demo/static-control.md new file mode 100644 index 0000000000000000000000000000000000000000..c49d8fb99bb0c173f02f0b804801cb014c621caf --- /dev/null +++ b/components/form/demo/static-control.md @@ -0,0 +1,27 @@ +# Static control + +- order: 5 + +静态文本表单控件：将一行静态文本和 label 标签置于同一行。 + +为 `

` 标签添加 `.ant-form-text` 类即可。 + +--- + +````html +

+
+ +
+

Ant

+
+
+
+ +
+ +
+
+ +
+```` diff --git a/components/form/demo/validate.md b/components/form/demo/validate.md new file mode 100644 index 0000000000000000000000000000000000000000..ff3ca4b6c0f6ec44ef5bf2c0a13b751f8a96ccc7 --- /dev/null +++ b/components/form/demo/validate.md @@ -0,0 +1,35 @@ +# Validate status + +- order: 7 + +校验状态 + +提供三种校验状态类：`.has-success` `.has-error` `.has-warning`, 分别代表成功、失败、警告 + +为 `ant-form-item` 类添加以上三种校验状态类即可。 + +--- + +````html +

成功

+
+ + +
+ Yes, I know you are ant. +
+
+ +

失败

+
+ + +
+ +

警告

+
+ + +
+ +```` diff --git a/components/form/index.md b/components/form/index.md new file mode 100644 index 0000000000000000000000000000000000000000..9759701b92a266c202b8e729ef8bf0dff2338ce1 --- /dev/null +++ b/components/form/index.md @@ -0,0 +1,11 @@ +# Form + +- category: CSS +- chinese: 表单 +- order: 3 + +--- + +## 如何使用 + +孵化中，待完善...... diff --git a/style/components/form.less b/style/components/form.less index 81d37a8df96011cf6f4b55158c963b9eac4ebc54..3c9d31a7cb8e4d3056f771e02e63dd9f29f76db5 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -19,7 +19,25 @@ label[required]:before { } // Input styles -//== Basic +// Shared size and type resets for form controls. Apply `.form-control` to any +// of the following form controls: +// +// select +// textarea +// input[type="text"] +// input[type="password"] +// input[type="datetime"] +// input[type="datetime-local"] +// input[type="date"] +// input[type="month"] +// input[type="time"] +// input[type="week"] +// input[type="number"] +// input[type="email"] +// input[type="url"] +// input[type="search"] +// input[type="tel"] +// input[type="color"] .@{css-prefix}input { .input; } @@ -35,12 +53,106 @@ label[required]:before { .input-group(~"@{css-prefix}input"); } +// Other form controls +// Radio & Checkbox +.@{css-prefix}radio, +.@{css-prefix}checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; + + label { + min-height: @line-height-computed; + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + } +} +.@{css-prefix}radio input[type="radio"], +.@{css-prefix}radio-inline input[type="radio"], +.@{css-prefix}checkbox input[type="checkbox"], +.@{css-prefix}checkbox-inline input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px \9; +} + +.@{css-prefix}radio + .@{css-prefix}radio, +.@{css-prefix}checkbox + .@{css-prefix}checkbox { + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing +} + +// Radios and checkboxes on same line +.@{css-prefix}radio-inline, +.@{css-prefix}checkbox-inline { + position: relative; + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + vertical-align: middle; + font-weight: normal; + cursor: pointer; +} +.@{css-prefix}radio-inline + .@{css-prefix}radio-inline, +.@{css-prefix}checkbox-inline + .@{css-prefix}checkbox-inline { + margin-top: 0; + margin-left: 10px; // space out consecutive inline controls +} + +// Apply same disabled cursor tweak as for inputs +// Some special care is needed because