GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of github.com:ant-design/ant-design

pull/56/head
afc163 9 years ago
parent
34fb2930a9 5042c2d7a7
commit
075817c373
8 changed files with 193 additions and 255 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      components/form/demo/disabled.md
  2. 132
      components/form/demo/form-controls.md
  3. 64
      components/form/demo/horizontal-form.md
  4. 37
      components/form/demo/inline-form.md
  5. 1
      components/form/demo/input-size.md
  6. 2
      components/form/demo/inputs.md
  7. 188
      components/form/demo/mix.md
  8. 1
      style/components/form.less

23
components/form/demo/disabled.md
View File

@ -30,30 +30,21 @@
````html
<form class="ant-form-horizontal">
<fieldset disabled>
<div class="ant-form-item">
<label for="disabledTextInput" class="col-5">Input:</label>
<div class="ant-form-item ant-form-item-compact">
<label for="userName" class="col-5" required>用户名：</label>
<div class="col-12">
<input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
<p class="ant-form-text">大眼萌 minion</p>
</div>
</div>
<div class="ant-form-item">
<label for="disabledSelect" class="col-5">Select:</label>
<label for="password" class="col-5" required>密码：</label>
<div class="col-12">
<select id="disabledSelect" class="ant-input">
<option>Disabled select</option>
</select>
</div>
</div>
<div class="ant-form-item ant-form-item-compact">
<div class="col-14 col-offset-5">
<label class="ant-checkbo-inline">
<input type="checkbox"> checkbox
</label>
<input class="ant-input" type="password" id="password" value="123456"/>
</div>
</div>
<div class="row">
<div class="col-14 col-offset-5">
<input type="submit" class="ant-btn ant-btn-primary" value="确 定">
<div class="col-12 col-offset-5">
<input type="submit" class="ant-btn ant-btn-primary" value="确 定" />
</div>
</div>
</fieldset>

132
components/form/demo/form-controls.md
View File

@ -8,92 +8,88 @@
---
````html
<form class="ant-form-horizontal">
<div class="ant-form-item">
<label class="col-6">输入框：</label>
<div class="col-18">
<input type="text" class="ant-input" placeholder="Please enter...">
</div>
</div>
<div class="ant-form-item">
<label class="col-6">文本域：</label>
<div class="col-18">
<textarea class="ant-input"></textarea>
````jsx
var Select = antd.Select;
var Option = Select.Option;
var Checkbox = antd.Checkbox;
var Radio = antd.Radio;
var RadioGroup = antd.RadioGroup;
function handleSelectChange(value) {
console.log('selected ' + value);
}
React.render(
<form className="ant-form-horizontal">
<div className="ant-form-item">
<label className="col-6">输入框：</label>
<div className="col-14">
<input type="text" className="ant-input" placeholder="Please enter..." />
</div>
</div>
<div class="ant-form-item">
<label class="col-6">下拉列表：</label>
<div class="col-18">
<select class="ant-input">
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选线五</option>
</select>
<div className="ant-form-item">
<label className="col-6">文本域：</label>
<div className="col-14">
<textarea className="ant-input"></textarea>
</div>
</div>
<div class="ant-form-item ant-form-item-compact">
<label class="col-6">checkbox 复选框：</label>
<div class="col-18">
<label class="ant-checkbox-vertical">
<input type="checkbox" value="apple"> Apple
</label>
<!-- disabled checkbox -->
<label class="ant-checkbox-vertical">
<input type="checkbox" value="banana" disabled> Banana(disabled)
</label>
<div className="ant-form-item">
<label className="col-6">ant-select：</label>
<div className="col-14">
<Select value="lucy" style={{width:200}} onChange={handleSelectChange}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
</div>
</div>
<div class="ant-form-item ant-form-item-compact">
<label class="col-6">内联的 checkbox：</label>
<div class="col-18">
<!-- 内联的checkbox -->
<label class="ant-checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="Kevin"> Kevin
<div className="ant-form-item ant-form-item-compact">
<label className="col-6">ant-checkbox：</label>
<div className="col-18">
<label className="ant-checkbox-vertical">
<Checkbox /> 选项一
</label>
<label class="ant-checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="Bob"> Bob
<label className="ant-checkbox-vertical">
<Checkbox /> 选项二
</label>
<label class="ant-checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="Stuart"> Stuart
<label className="ant-checkbox-vertical">
<Checkbox disabled={true} /> 选项三（不可选）
</label>
</div>
</div>
<div class="ant-form-item ant-form-item-compact">
<label class="col-6">radio 单选框：</label>
<div class="col-18">
<label class="ant-radio-vertical">
<input type="radio" name="radios" id="optionsRadios1" value="option1" checked> Apple
<div className="ant-form-item ant-form-item-compact">
<label className="col-6">ant-checkbox：</label>
<div className="col-18">
<label className="ant-checkbox-inline">
<Checkbox />选项一
</label>
<label className="ant-checkbox-inline">
<Checkbox />选项二
</label>
<!-- disabled radio -->
<label class="ant-radio-vertical">
<input type="radio" name="radios" id="optionsRadios3" value="option3" disabled> Banana(disabled)
<label className="ant-checkbox-inline">
<Checkbox />选项三
</label>
</div>
</div>
<div class="ant-form-item ant-form-item-compact">
<label class="col-6">内联的 radio：</label>
<div class="col-18">
<!-- 内联的radio -->
<label class="ant-radio-inline">
<input type="radio" name="inlineRadios" id="inlineRadio1" value="Kevin"> Kevin
</label>
<label class="ant-radio-inline">
<input type="radio" name="inlineRadios" id="inlineRadio2" value="Stuart"> Stuart
</label>
<label class="ant-radio-inline">
<input type="radio" name="inlineRadios" id="inlineRadio3" value="Bob"> Bob
</label>
<div className="ant-form-item ant-form-item-compact">
<label className="col-6">ant-radio：</label>
<div className="col-18">
<RadioGroup>
<Radio value="a" checked={true}>A</Radio>
<Radio value="b" >B</Radio>
<Radio value="c" >C</Radio>
<Radio value="d" disabled={true}>D</Radio>
</RadioGroup>
</div>
</div>
<div class="ant-form-item ant-form-item-compact">
<label class="col-6" for="InputFile">头像：</label>
<div class="col-18">
<input type="file" id="InputFile" class="ant-upload">
<p class="ant-form-explain">请选择一个文件</p>
<div className="ant-form-item ant-form-item-compact">
<label className="col-6" for="InputFile">头像：</label>
<div className="col-18">
<input type="file" id="InputFile" className="ant-upload" />
<p className="ant-form-explain">请选择一个文件</p>
</div>
</div>
</form>
, document.getElementById('components-form-demo-form-controls'));
````

64
components/form/demo/horizontal-form.md
View File

@ -12,48 +12,52 @@
---
````html
<form class="ant-form-horizontal">
<div class="ant-form-item ant-form-item-compact">
<label for="userName" class="col-6" required>用户名：</label>
<div class="col-6">
<p class="ant-form-text">大眼萌 minion</p>
````jsx
var Checkbox = antd.Checkbox;
var Radio = antd.Radio;
var RadioGroup = antd.RadioGroup;
React.render(
<form className="ant-form-horizontal">
<div className="ant-form-item ant-form-item-compact">
<label for="userName" className="col-6" required>用户名：</label>
<div className="col-6">
<p className="ant-form-text">大眼萌 minion</p>
</div>
</div>
<div class="ant-form-item">
<label for="password" class="col-6" required>密码：</label>
<div class="col-14">
<input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div>
<div className="ant-form-item">
<label for="password" className="col-6" required>密码：</label>
<div className="col-14">
<input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div>
</div>
<div class="ant-form-item ant-form-item-compact">
<label class="col-6" required>您的性别：</label>
<div class="col-14">
<label class="ant-radio-inline">
<input type="radio" name="radios" id="male-radio" value="male" checked> 男的
</label>
<label class="ant-radio-inline">
<input type="radio" name="radios" id="female-radio" value="female"> 女的
</label>
<div className="ant-form-item ant-form-item-compact">
<label className="col-6" required>您的性别：</label>
<div className="col-14">
<RadioGroup>
<Radio value="male" checked={true}>男的</Radio>
<Radio value="female">女的</Radio>
</RadioGroup>
</div>
</div>
<div class="ant-form-item">
<label for="password" class="col-6" required>备注：</label>
<div class="col-14">
<textarea class="ant-input" placeholder="随便写"></textarea>
<div className="ant-form-item">
<label for="password" className="col-6" required>备注：</label>
<div className="col-14">
<textarea className="ant-input" placeholder="随便写"></textarea>
</div>
</div>
<div class="ant-form-item ant-form-item-compact">
<div class="col-14 col-offset-6">
<div className="ant-form-item ant-form-item-compact">
<div className="col-14 col-offset-6">
<label>
<input type="checkbox"> 我是同意的
<Checkbox /> 同意
</label>
</div>
</div>
<div class="row">
<div class="col-16 col-offset-6">
<input type="submit" class="ant-btn ant-btn-primary" value="确 定" />
<div className="row">
<div className="col-16 col-offset-6">
<input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
</div>
</div>
</form>
, document.getElementById('components-form-demo-horizontal-form'));
````

37
components/form/demo/inline-form.md
View File

@ -6,34 +6,25 @@
---
````html
<form class="ant-form-inline">
<div class="ant-form-item">
````jsx
var Checkbox = antd.Checkbox;
React.render(
<form className="ant-form-inline">
<div className="ant-form-item">
<label for="userName">账户：</label>
<input class="ant-input" type="text" id="userName" placeholder="请输入"/>
<input className="ant-input" type="text" id="userName" placeholder="请输入账户名" />
</div>
<div class="ant-form-item">
<div className="ant-form-item">
<label for="password">密码：</label>
<input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
<input className="ant-input" type="password" id="password" placeholder="请输入密码" />
</div>
<input type="submit" class="ant-btn ant-btn-primary" value="登 录" />
</form>
<br />
<form class="ant-form-inline">
<div class="ant-form-item">
<input class="ant-input" type="text" id="userName" placeholder="请输入账户名"/>
</div>
<div class="ant-form-item">
<input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div>
<div class="ant-checkbox-inline">
<label>
<input type="checkbox"> 记住我
<div className="ant-checkbox-inline">
<label className="ant-checkbox-inline">
<Checkbox /> 记住我
</label>
</div>
<input type="submit" class="ant-btn ant-btn-primary" value="登 录" />
<input type="submit" className="ant-btn ant-btn-primary" value="登 录" />
</form>
, document.getElementById('components-form-demo-inline-form'));
````

1
components/form/demo/input-size.md
View File

@ -22,5 +22,4 @@
</div>
</div>
</div>
````

2
components/form/demo/inputs.md
View File

@ -76,5 +76,5 @@
<p class="ant-form-explain">请输入正确的电话号码</p>
</div>
</div>
</form>
</form>
````

188
components/form/demo/mix.md
View File

@ -15,9 +15,6 @@ var Switch = antd.Switch;
var Menu = antd.Menu;
var Dropdown = antd.Dropdown;
var Slider = antd.Slider;
var Checkbox = antd.Checkbox;
var Radio = antd.Radio;
var RadioGroup = antd.RadioGroup;
var menu = <Menu>
<Menu.Item>
@ -40,131 +37,90 @@ function onInputNumberChange(v){
}
React.render(
<form className="ant-form-horizontal">
<div className="ant-form-item">
<label className="col-6" required>Input-Number:</label>
<div className="col-10">
<InputNumber min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
<span className="ant-form-text"> 台机器</span>
</div>
<form className="ant-form-horizontal">
<div className="ant-form-item">
<label className="col-6" required>Input-Number:</label>
<div className="col-10">
<InputNumber min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
<span className="ant-form-text"> 台机器</span>
</div>
<div className="ant-form-item ant-form-item-compact">
<label className="col-6" required>
<i className="anticon anticon-exclamation-circle" style={{color: '#f60'}}></i> 我是标题:
</label>
<div className="col-7">
<p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
</div>
<div className="col-9">
<p className="ant-form-text">
<a href="javascript:;">链接文字</a>
</p>
</div>
</div>
<div className="ant-form-item ant-form-item-compact">
<label className="col-6" required>
<i className="anticon anticon-exclamation-circle" style={{color: '#f60'}}></i> 我是标题:
</label>
<div className="col-10">
<p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
<p className="ant-form-text">
<a href="javascript:;">链接文字</a>
</p>
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Switch 开关:</label>
<div className="col-10">
<Switch />
</div>
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Switch 开关:</label>
<div className="col-10">
<Switch />
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Slider 滑动输入条:</label>
<div className="col-10">
<Slider marks={["A","B","C","D","E","F","G"]} />
</div>
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Slider 滑动输入条:</label>
<div className="col-10">
<Slider marks={["A","B","C","D","E","F","G"]} />
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Select 选择器:</label>
<div className="col-18">
<Select value="lucy" style={{width:200}} onChange={handleSelectChange}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
</div>
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Select 选择器:</label>
<div className="col-18">
<Select value="lucy" style={{width:200}} onChange={handleSelectChange}>
<Option value="jack">jack</Option>
<Option value="lucy">lucy</Option>
<Option value="disabled" disabled>disabled</Option>
<Option value="yiminghe">yiminghe</Option>
</Select>
</div>
<div className="ant-form-item">
<label className="col-6" for="site4">按钮式下拉输入框:</label>
<div className="col-16">
<div className="ant-input-group">
<input type="text" className="ant-input" id="site4" placeholder="Search for..." />
<div className="ant-input-group-btn">
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-menu">
.com <i className="anticon anticon-down"></i>
</button>
</Dropdown>
</div>
</div>
<div className="ant-form-item">
<label className="col-6" for="site4">按钮式下拉输入框:</label>
<div className="col-16">
<div className="ant-input-group">
<input type="text" className="ant-input" id="site4" placeholder="Search for..." />
<div className="ant-input-group-btn">
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-menu">
.com <i className="anticon anticon-down"></i>
</button>
</Dropdown>
</div>
</div>
</div>
<div className="ant-form-item ant-form-item-compact">
<label for="" className="col-6" required>ant-radio:</label>
<div className="col-16">
<RadioGroup>
<Radio value="a" checked={true}>选项一</Radio>
<Radio value="b">选项二</Radio>
<Radio value="c">选项三</Radio>
<Radio value="d">选项四</Radio>
</RadioGroup>
</div>
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Datepicker:</label>
<div className="col-6">
<Datepicker value="" />
</div>
<div className="ant-form-item ant-form-item-compact">
<label for="" className="col-6" required>ant-checkbox:</label>
<div className="col-16">
<label className="ant-checkbox-inline">
<Checkbox />选项一
</label>
<label className="ant-checkbox-inline">
<Checkbox />选项二
</label>
<label className="ant-checkbox-inline">
<Checkbox />选项三
</label>
</div>
<div className="col-2">
<p className="ant-form-split">--</p>
</div>
<div className="ant-form-item ant-form-item-compact">
<label for="" className="col-6" required>垂直的 ant-checkbox:</label>
<div className="col-16">
<label className="ant-checkbox-vertical">
<Checkbox /> 选项一
</label>
<label className="ant-checkbox-vertical">
<Checkbox /> 选项二
</label>
<label className="ant-checkbox-vertical">
<Checkbox /> 选项三
</label>
</div>
<div className="col-6">
<Datepicker value="" />
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Datepicker:</label>
<div className="col-6">
<Datepicker value="" />
</div>
<div className="col-2">
<p className="ant-form-split">--</p>
</div>
<div className="col-6">
<Datepicker value="" />
</div>
</div>
<div className="ant-form-item has-error">
<label for="" className="col-6" required>Datepicker 校验:</label>
<div className="col-6">
<Datepicker value="" />
</div>
<div className="ant-form-item has-error">
<label for="" className="col-6" required>Datepicker 校验:</label>
<div className="col-6">
<Datepicker value="" />
</div>
<div className="col-2">
<p className="ant-form-split">--</p>
</div>
<div className="col-6">
<Datepicker value="" />
</div>
<div className="col-19 col-offset-6">
<p className="ant-form-explain">请输入正确选项</p>
</div>
<div className="col-2">
<p className="ant-form-split">--</p>
</div>
<div className="col-6">
<Datepicker value="" />
</div>
<div className="col-19 col-offset-6">
<p className="ant-form-explain">请输入正确选项</p>
</div>
</form>
</div>
</form>
, document.getElementById('components-form-demo-mix'));
````

1
style/components/form.less
View File

@ -92,6 +92,7 @@ input[type="checkbox"] {
.@{css-prefix}form-text {
display: inline-block;
padding-right: 8px;
}
.@{css-prefix}form-split {

Write Preview
Loading…
Cancel
Save