diff --git a/components/form/demo/basic.md b/components/form/demo/basic.md index ff26cea92..885688449 100644 --- a/components/form/demo/basic.md +++ b/components/form/demo/basic.md @@ -1,32 +1,31 @@ -# Basic from +# 基本使用 -- order: 1 +- order: 0 -表单基本实例 - -表单一定会包含表单域,表单域包含了一个标签和一个输入控件,这里我们用类 `.ant-form-item` 表示。 - -为了获得更好的排列,请将 label 元素和 ``、``、`` 控件包裹在 `.ant-form-item` 中。 +为了获得更好的排列,请将 `label` 标签和 ``、``、`` 控件包裹在 `.ant-form-item` 中。 `注`:`.ant-input` 类为 ``、``、`` 元素默认设置了 `width: 100%`。 +为 `label` 标签添加 `required` 属性,表示该项必选。 + --- ````html - Username - + 用户名: + - Password - + 密码: + - Remember me! + 保持登录 - + + ```` diff --git a/components/form/demo/disabled.md b/components/form/demo/disabled.md index 181e25379..346526489 100644 --- a/components/form/demo/disabled.md +++ b/components/form/demo/disabled.md @@ -1,34 +1,35 @@ -# Disabled status +# 禁用状态 -- order: 6 +- order: 4 -禁用状态 - - 1. 单独为输入框设置 disabled 属性 - 2. 为 设置 disabled 属性,可以禁用 中包含的所有控件 +1) 单独为输入框设置 `disabled` 属性; + +2) 为 `` 设置 `disabled` 属性,可以禁用 `` 中包含的所有控件。 --- ````html 禁用的表单控件 - + + + 禁用的fieldset - Disabled input + Input: - Disabled select + Select Disabled select - Disabled checkbox + checkbox Submit diff --git a/components/form/demo/form-controls.md b/components/form/demo/form-controls.md index dce111574..416ca97cc 100644 --- a/components/form/demo/form-controls.md +++ b/components/form/demo/form-controls.md @@ -1,8 +1,6 @@ -# Form controls +# 表单控件 -- order: 4 - -表单控件 +- order: 3 展示所有支持的表单控件。 @@ -11,86 +9,99 @@ --- ````html -input 输入框 - - - - - -textarea 文本域 - - -select 下拉列表 - - 1 - 2 - 3 - 4 - 5 - - -checkbox 复选框 - - - - Apple - - - - - - - Banana disabled - - - - - - 1 - - - 2 - - - 3 - - -radio 单选框 - - - - Apple - - - - - - Peach - - - - - - - Banana - - - - - - 1 - - - 2 - - - 3 - - -文件输入框 - - File input - - Choose a file... + + + 输入框: + + + + + 文本域: + + + + + + 下拉列表: + + + 选项一 + 选项二 + 选项三 + 选项四 + 选线五 + + + + + checkbox 复选框: + + + + Apple + + + + + + Banana(disabled) + + + + + + 内联的 checkbox: + + + + Kevin + + + Bob + + + Stuart + + + + + radio 单选框: + + + + Apple + + + + + + Banana(disabled) + + + + + + 内联的 radio: + + + + Kevin + + + Stuart + + + Bob + + + + + 头像: + + + 请选择一个文件 + + + ```` diff --git a/components/form/demo/horizontal-form.md b/components/form/demo/horizontal-form.md index d71d56422..c808ff8fb 100644 --- a/components/form/demo/horizontal-form.md +++ b/components/form/demo/horizontal-form.md @@ -1,34 +1,62 @@ -# Horizontal form +# 水平排列的表单 -- order: 2 - -水平排列的表单 +- order: 1 为 `` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`),并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/),可以实现 label 标签和表单控件的水平排列。 +如需将一行静态文本和 `` 标签置于同一行,则只需为 `` 标签添加 `.ant-form-text` 类即可。 + + --- ````html - Username - - + 用户名: + + 大眼萌 minion + + + + 什么鬼? + - Password + 密码: - + - + 您的性别: + + + 男的 + + + 女的 + + + + + 备注: + + + 随便写点什么吧 + + + + - Remember me! + 我是同意的 - + + + + + ```` diff --git a/components/form/demo/inline-form.md b/components/form/demo/inline-form.md index dc0494a7a..6aa32690a 100644 --- a/components/form/demo/inline-form.md +++ b/components/form/demo/inline-form.md @@ -1,8 +1,6 @@ -# Horizontal form +# 行内排列的表单 -- order: 3 - -内联的表单 +- order: 2 在**视口宽度大于等于 768px **时,你可以为 `` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。 @@ -11,13 +9,31 @@ ````html - Username - + 账户: + - Password - + 密码: + - + + + + + + + + + + + + + + 记住我 + + + + + ```` diff --git a/components/form/demo/input-size.md b/components/form/demo/input-size.md new file mode 100644 index 000000000..c17f48b9d --- /dev/null +++ b/components/form/demo/input-size.md @@ -0,0 +1,58 @@ +# Input 尺寸 + +- order: 7 + +关于尺寸,我们为 `.ant-input` `.ant-input-group` 均提供了三种尺寸:大(-lg)、中(默认)、小(-sm),往类名后添加后缀即可。 + +但是在 `` 表单里面,我们只使用**大尺寸**作为唯一的尺寸。 + +--- + +````html +input + + + + + + + + + +input-group + + + + + + .com + + + + + + + + + + + + .com + + + + + + + + + + + + .com + + + + + +```` diff --git a/components/form/demo/inputs.md b/components/form/demo/inputs.md new file mode 100644 index 000000000..7d2342805 --- /dev/null +++ b/components/form/demo/inputs.md @@ -0,0 +1,98 @@ +# Input 输入框集合 + +- order: 6 + +使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的 Input 输入框。 + +--- + +````html + + + 标签输入框: + + + Http:// + + + + + + 标签输入框: + + + Http:// + + .com + + + + + 按钮式下拉输入框: + + + + + + .com + + + + + + + + 带按钮的输入框: + + + + + GO! + + + + + + 输入身份证: + + + + + + + + + + + + + + + + + + + 电话号码: + + + + + + + -- + + + + + + + + + + + 请输入正确的电话号码 + + + + +```` diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md new file mode 100644 index 000000000..1cb807742 --- /dev/null +++ b/components/form/demo/mix.md @@ -0,0 +1,108 @@ +# 表单组合 + +- order: 8 + +展示和表单相关的其他 ant-design 组件。 + +--- + +````jsx +var Select = antd.Select; +var Option = Select.Option; +var InputNumber = antd.InputNumber; +var Datepicker = antd.Datepicker; + + +function handleSelectChange(value) { + console.log('selected ' + value); +} + +function onChange(v){ + console.log('changed',v); +} + +React.render( + + + Input-Number: + + + + 台机器 + + + 我是标题: + + 唧唧复唧唧木兰当户织呀 + + + + 链接文字 + + + + + Switch 开关: + + 请填写 switch + + + + Slider 滑动输入条: + + 请填写 slider + + + + Select 选择器: + + + jack + lucy + disabled + yiminghe + + + + + ant-radio: + + 请填写 ant-design 的 radio + + + + ant-checkbox: + + 请填写 ant-design 的 checkbox + + + + Datepicker: + + + + + -- + + + + + + + Datepicker 校验: + + + + + -- + + + + + + 请输入正确选项 + + + +, document.getElementById('components-form-demo-mix')); +```` \ No newline at end of file diff --git a/components/form/demo/validate.md b/components/form/demo/validate.md index ff3ca4b6c..9e468ba04 100644 --- a/components/form/demo/validate.md +++ b/components/form/demo/validate.md @@ -1,35 +1,81 @@ -# Validate status +# 校验提示 -- order: 7 +- order: 5 -校验状态 +我们为表单控件的校验状态定义了样式,共有三种校验状态类: -提供三种校验状态类:`.has-success` `.has-error` `.has-warning`, 分别代表成功、失败、警告 +`.has-success` `.has-error` `.has-warning`, 分别代表校验成功、校验失败、有警告。 -为 `ant-form-item` 类添加以上三种校验状态类即可。 +将以上三种校验状态类添加到这些控件的父级元素即可。 + +另外为输入框添加反馈图标,可以更好地反馈当前的校验状态,使用 `.has-feedback` 类包裹 input 输入框即可。 + +**注意**: 反馈图标只能使用在文本输入框 `` 元素上。 --- ````html -成功 +校验提示 + - Username - - - Yes, I know you are ant. - + 成功校验: + -失败 - Username - + 失败校验: + + 请输入数字和字母组合 -警告 - Username - + 警告校验: + +带图标的校验提示(水平排列的表单) + + + + 校验中: + + + + + + 信息审核中... + + + + + 成功校验: + + + + + + + + + + 失败校验: + + + + + + 请输入数字和字母组合 + + + + + 警告校验: + + + + + + + + ```` diff --git a/components/form/index.md b/components/form/index.md index 3d746c8d2..8ce364812 100644 --- a/components/form/index.md +++ b/components/form/index.md @@ -6,4 +6,22 @@ --- -表单是用来接受用户各种输入的控件(元素)。 +具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。 + + +### 表单 + +除了默认的排列方式,我们还为 `form` 提供了以下两种排列方式: + +- 水平排列:`.ant-form-horizontal` 类可以实现 `label` 标签和表单控件的水平排列; +- 行内排列:`.ant-form-inline` 类可使其表现为 inline-block 级别的控件。 + +**注**: `.ant-form-inline` 类只适用于**视口宽度大于等于 768px **的情形。 + +### 表单域 + +表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。 + +在这里,我们使用 `.ant-form-item` 类来表示表单域,它包含了一个标签和一个输入控件。 + +为了获得更好的排列,请将 `label` 标签和 ``、``、`` 控件包裹在 `.ant-form-item` 中。
Choose a file...
请选择一个文件
` 标签添加 `.ant-form-text` 类即可。 + + --- ````html
大眼萌 minion
+ 什么鬼? +
随便写点什么吧
--
请输入正确的电话号码
台机器
唧唧复唧唧木兰当户织呀
+ 链接文字 +
请填写 switch
请填写 slider
请填写 ant-design 的 radio
请填写 ant-design 的 checkbox
请输入正确选项