test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 20:49:14 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

Improve advanced form style, close #8339

Browse Source
This commit is contained in:
afc163 2017-12-04 10:47:01 +08:00
parent 4dc310c331
commit cc43bd3f12
2 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -7,17 +7,17 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
> >
<div <div
class="ant-row" class="ant-row"
style="margin-left:-20px;margin-right:-20px" style="margin-left:-12px;margin-right:-12px"
> >
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:block" style="padding-left:12px;padding-right:12px;display:block"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -28,7 +28,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "
@ -48,13 +48,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</div> </div>
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:block" style="padding-left:12px;padding-right:12px;display:block"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -65,7 +65,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "
@ -85,13 +85,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</div> </div>
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:block" style="padding-left:12px;padding-right:12px;display:block"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -102,7 +102,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "
@ -122,13 +122,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</div> </div>
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:block" style="padding-left:12px;padding-right:12px;display:block"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -139,7 +139,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "
@ -159,13 +159,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</div> </div>
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:block" style="padding-left:12px;padding-right:12px;display:block"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -176,7 +176,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "
@ -196,13 +196,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</div> </div>
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:block" style="padding-left:12px;padding-right:12px;display:block"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -213,7 +213,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "
@ -233,13 +233,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</div> </div>
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:none" style="padding-left:12px;padding-right:12px;display:none"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -250,7 +250,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "
@ -270,13 +270,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</div> </div>
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:none" style="padding-left:12px;padding-right:12px;display:none"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -287,7 +287,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "
@ -307,13 +307,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</div> </div>
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:none" style="padding-left:12px;padding-right:12px;display:none"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -324,7 +324,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "
@ -344,13 +344,13 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</div> </div>
<div <div
class="ant-col-8" class="ant-col-8"
style="padding-left:20px;padding-right:20px;display:none" style="padding-left:12px;padding-right:12px;display:none"
> >
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col-5 ant-form-item-label" class="ant-form-item-label"
> >
<label <label
class="" class=""
@ -361,7 +361,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
</label> </label>
</div> </div>
<div <div
class="ant-col-19 ant-form-item-control-wrapper" class="ant-form-item-control-wrapper"
> >
<div <div
class="ant-form-item-control " class="ant-form-item-control "

18
components/form/demo/advanced-search.md
View File

@ -47,15 +47,11 @@ class AdvancedSearchForm extends React.Component {
getFields() { getFields() {
const count = this.state.expand ? 10 : 6; const count = this.state.expand ? 10 : 6;
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 5 },
wrapperCol: { span: 19 },
};
const children = []; const children = [];
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
children.push( children.push(
<Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}> <Col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
<FormItem {...formItemLayout} label={`Field ${i}`}> <FormItem label={`Field ${i}`}>
{getFieldDecorator(`field-${i}`)( {getFieldDecorator(`field-${i}`)(
<Input placeholder="placeholder" /> <Input placeholder="placeholder" />
)} )}
@ -72,7 +68,7 @@ class AdvancedSearchForm extends React.Component {
className="ant-advanced-search-form" className="ant-advanced-search-form"
onSubmit={this.handleSearch} onSubmit={this.handleSearch}
> >
<Row gutter={40}>{this.getFields()}</Row> <Row gutter={24}>{this.getFields()}</Row>
<Row> <Row>
<Col span={24} style={{ textAlign: 'right' }}> <Col span={24} style={{ textAlign: 'right' }}>
<Button type="primary" htmlType="submit">Search</Button> <Button type="primary" htmlType="submit">Search</Button>
@ -100,12 +96,20 @@ ReactDOM.render(
```` ````
````css ````css
#components-form-demo-advanced-search .ant-advanced-search-form { .ant-advanced-search-form {
padding: 24px; padding: 24px;
background: #fbfbfb; background: #fbfbfb;
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
border-radius: 6px; border-radius: 6px;
} }
.ant-advanced-search-form .ant-form-item {
display: flex;
}
.ant-advanced-search-form .ant-form-item-label {
overflow: visible;
}
```` ````
<style> <style>