mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat: Col support flex prop (#16635)

Browse Source 
* feat: Col support `flex` prop

* update snapshot

* update doc

* row component use flex type by default

* revert grid flex layout doc

* remove float style

* remove doc old FAQ

* revert .make-row

* col style use flex and max-width

* remove useless Col style and imorove base doc for a single Col

* update snapshots

* fix flex mode pseudo

* update snapshots

* back to old flex mode demo gray background color

* set default col flex => 1 auto

* change grid about flex mode description

* update snapshots

* improve grid introduce and fix with gutter bug

* update snapshots

* remove version
This commit is contained in:
二货机器人 2019-11-20 11:13:24 +08:00 committed by GitHub
parent 9da09ffb2a
commit efd3b35830
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 356 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
View File

@ -167,7 +167,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
style="margin:0 auto" style="margin:0 auto"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -215,7 +215,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -291,7 +291,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -398,7 +398,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -475,7 +475,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -611,7 +611,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"

2
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2128,7 +2128,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
Custom header Custom header
</div> </div>
<div <div
class="ant-row-flex" class="ant-row"
style="margin-left:-4px;margin-right:-4px;flex-wrap:nowrap" style="margin-left:-4px;margin-right:-4px;flex-wrap:nowrap"
> >
<div <div

2
components/calendar/demo/customize-header.md
View File

@ -60,7 +60,7 @@ ReactDOM.render(
return ( return (
<div style={{ padding: 10 }}> <div style={{ padding: 10 }}>
<div style={{ marginBottom: '10px' }}>Custom header </div> <div style={{ marginBottom: '10px' }}>Custom header </div>
<Row type="flex" style={{ flexWrap: 'nowrap' }} gutter={8}> <Row style={{ flexWrap: 'nowrap' }} gutter={8}>
<Col style={{ flex: 'none' }}> <Col style={{ flex: 'none' }}>
<Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}> <Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
<Button value="month">Month</Button> <Button value="month">Month</Button>

4
components/comment/__tests__/__snapshots__/demo.test.js.snap
View File

@ -152,7 +152,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
> >
<div> <div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -168,7 +168,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"

6
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -7028,7 +7028,7 @@ exports[`ConfigProvider components Form configProvider 1`] = `
class="config-form config-form-horizontal" class="config-form config-form-horizontal"
> >
<div <div
class="config-row-flex config-form-item config-form-item-has-error" class="config-row config-form-item config-form-item-has-error"
> >
<div <div
class="config-col config-form-item-control" class="config-col config-form-item-control"
@ -7052,7 +7052,7 @@ exports[`ConfigProvider components Form normal 1`] = `
class="ant-form ant-form-horizontal" class="ant-form ant-form-horizontal"
> >
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-error" class="ant-row ant-form-item ant-form-item-has-error"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -7076,7 +7076,7 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
class="prefix-Form prefix-Form-horizontal" class="prefix-Form prefix-Form-horizontal"
> >
<div <div
class="ant-row-flex prefix-Form-item prefix-Form-item-has-error" class="ant-row prefix-Form-item prefix-Form-item-has-error"
> >
<div <div
class="ant-col prefix-Form-item-control" class="ant-col prefix-Form-item-control"

1
components/form/FormItem.tsx
View File

@ -196,7 +196,6 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
return ( return (
<Row <Row
type="flex"
className={classNames(itemClassName)} className={classNames(itemClassName)}
style={style} style={style}
key="row" key="row"

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

@ -15,7 +15,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
style="padding-left:12px;padding-right:12px" style="padding-left:12px;padding-right:12px"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -50,7 +50,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
style="padding-left:12px;padding-right:12px" style="padding-left:12px;padding-right:12px"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -85,7 +85,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
style="padding-left:12px;padding-right:12px" style="padding-left:12px;padding-right:12px"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -120,7 +120,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
style="padding-left:12px;padding-right:12px" style="padding-left:12px;padding-right:12px"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -155,7 +155,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
style="padding-left:12px;padding-right:12px" style="padding-left:12px;padding-right:12px"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -190,7 +190,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
style="padding-left:12px;padding-right:12px" style="padding-left:12px;padding-right:12px"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -287,7 +287,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
id="basic" id="basic"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -316,7 +316,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -378,7 +378,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
valuepropname="checked" valuepropname="checked"
> >
<div <div
@ -411,7 +411,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control" class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@ -439,7 +439,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
id="control-hooks" id="control-hooks"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -468,7 +468,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -548,7 +548,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control" class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@ -592,7 +592,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
id="control-ref" id="control-ref"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -621,7 +621,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -701,7 +701,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control" class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@ -745,7 +745,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
id="customized_form_controls" id="customized_form_controls"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -833,7 +833,7 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -862,7 +862,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
> >
<div> <div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
@ -908,7 +908,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
@ -936,7 +936,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
id="dynamic_rule" id="dynamic_rule"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-4 ant-form-item-label" class="ant-col ant-col-4 ant-form-item-label"
@ -966,7 +966,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-4 ant-form-item-label" class="ant-col ant-col-4 ant-form-item-label"
@ -996,7 +996,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control" class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control"
@ -1026,7 +1026,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control" class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control"
@ -1055,7 +1055,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
id="basicForm" id="basicForm"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -1084,7 +1084,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -1132,7 +1132,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control" class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@ -1184,7 +1184,7 @@ exports[`renders ./components/form/demo/global-state.md correctly 1`] = `
id="global_state" id="global_state"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1234,7 +1234,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
id="horizontal_login" id="horizontal_login"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -1282,7 +1282,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -1330,7 +1330,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -1358,7 +1358,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
class="ant-form ant-form-horizontal" class="ant-form ant-form-horizontal"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-4 ant-form-item-label" class="ant-col ant-col-4 ant-form-item-label"
@ -1442,7 +1442,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-4 ant-form-item-label" class="ant-col ant-col-4 ant-form-item-label"
@ -1470,7 +1470,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-4 ant-form-item-label" class="ant-col ant-col-4 ant-form-item-label"
@ -1498,7 +1498,7 @@ exports[`renders ./components/form/demo/layout.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control" class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control"
@ -1527,7 +1527,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
id="nest-messages" id="nest-messages"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -1556,7 +1556,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -1585,7 +1585,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -1686,7 +1686,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -1715,7 +1715,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-8 ant-form-item-label" class="ant-col ant-col-8 ant-form-item-label"
@ -1742,7 +1742,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control" class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
@ -1770,7 +1770,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
id="normal_login" id="normal_login"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -1818,7 +1818,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -1866,7 +1866,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -1904,7 +1904,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control" class="ant-col ant-form-item-control"
@ -1938,7 +1938,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
id="register" id="register"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -1967,7 +1967,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2029,7 +2029,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2091,7 +2091,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2145,7 +2145,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2228,7 +2228,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2328,7 +2328,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2381,7 +2381,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2437,7 +2437,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
valuepropname="checked" valuepropname="checked"
> >
<div <div
@ -2474,7 +2474,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
@ -2502,7 +2502,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
id="time_related_controls" id="time_related_controls"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2558,7 +2558,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2615,7 +2615,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2671,7 +2671,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2743,7 +2743,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2816,7 +2816,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
@ -2877,7 +2877,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8" class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"
@ -2905,7 +2905,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
id="validate_other" id="validate_other"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -2932,7 +2932,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -3012,7 +3012,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -3072,7 +3072,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -3180,7 +3180,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
valuepropname="checked" valuepropname="checked"
> >
<div <div
@ -3215,7 +3215,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -3327,7 +3327,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -3412,7 +3412,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -3497,7 +3497,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -3648,7 +3648,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -3977,7 +3977,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
valuepropname="fileList" valuepropname="fileList"
> >
<div <div
@ -4016,7 +4016,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -4048,7 +4048,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control" class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control"
@ -4075,7 +4075,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form ant-form-horizontal" class="ant-form ant-form-horizontal"
> >
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-error" class="ant-row ant-form-item ant-form-item-has-error"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4104,7 +4104,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-warning" class="ant-row ant-form-item ant-form-item-has-warning"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4133,7 +4133,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-is-validating" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-is-validating"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4165,7 +4165,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-success" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4197,7 +4197,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-warning" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4229,7 +4229,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-error" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4261,7 +4261,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-success" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4319,7 +4319,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-warning" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4383,7 +4383,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-error" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4464,7 +4464,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-is-validating" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-is-validating"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4546,7 +4546,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
style="margin-bottom:0" style="margin-bottom:0"
> >
<div <div
@ -4566,7 +4566,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
class="ant-form-item-control-input" class="ant-form-item-control-input"
> >
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-error" class="ant-row ant-form-item ant-form-item-has-error"
style="display:inline-block;width:calc(50% - 12px)" style="display:inline-block;width:calc(50% - 12px)"
> >
<div <div
@ -4616,7 +4616,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
- -
</span> </span>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
style="display:inline-block;width:calc(50% - 12px)" style="display:inline-block;width:calc(50% - 12px)"
> >
<div <div
@ -4664,7 +4664,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item ant-form-item-has-feedback ant-form-item-has-success" class="ant-row ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
> >
<div <div
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5" class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-5"
@ -4774,7 +4774,7 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
class="ant-form ant-form-horizontal" class="ant-form ant-form-horizontal"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-7 ant-form-item-label" class="ant-col ant-col-7 ant-form-item-label"

2
components/form/__tests__/__snapshots__/index.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`]
<div <div
aria-hidden="true" aria-hidden="true"
cccc="bbbb" cccc="bbbb"
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
data-text="123" data-text="123"
> >
<div <div

95
components/grid/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2,6 +2,15 @@
exports[`renders ./components/grid/demo/basic.md correctly 1`] = ` exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
<div> <div>
<div
class="ant-row"
>
<div
class="ant-col"
>
col
</div>
</div>
<div <div
class="ant-row" class="ant-row"
> >
@ -68,7 +77,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
sub-element align left sub-element align left
</p> </p>
<div <div
class="ant-row-flex ant-row-flex-start" class="ant-row ant-row-start"
> >
<div <div
class="ant-col ant-col-4" class="ant-col ant-col-4"
@ -95,7 +104,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
sub-element align center sub-element align center
</p> </p>
<div <div
class="ant-row-flex ant-row-flex-center" class="ant-row ant-row-center"
> >
<div <div
class="ant-col ant-col-4" class="ant-col ant-col-4"
@ -122,7 +131,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
sub-element align right sub-element align right
</p> </p>
<div <div
class="ant-row-flex ant-row-flex-end" class="ant-row ant-row-end"
> >
<div <div
class="ant-col ant-col-4" class="ant-col ant-col-4"
@ -149,7 +158,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
sub-element monospaced arrangement sub-element monospaced arrangement
</p> </p>
<div <div
class="ant-row-flex ant-row-flex-space-between" class="ant-row ant-row-space-between"
> >
<div <div
class="ant-col ant-col-4" class="ant-col ant-col-4"
@ -176,7 +185,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
sub-element align full sub-element align full
</p> </p>
<div <div
class="ant-row-flex ant-row-flex-space-around" class="ant-row ant-row-space-around"
> >
<div <div
class="ant-col ant-col-4" class="ant-col ant-col-4"
@ -208,7 +217,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
Align Top Align Top
</p> </p>
<div <div
class="ant-row-flex ant-row-flex-center ant-row-flex-top" class="ant-row ant-row-center ant-row-top"
> >
<div <div
class="ant-col ant-col-4" class="ant-col ant-col-4"
@ -251,7 +260,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
Align Center Align Center
</p> </p>
<div <div
class="ant-row-flex ant-row-flex-space-around ant-row-flex-middle" class="ant-row ant-row-space-around ant-row-middle"
> >
<div <div
class="ant-col ant-col-4" class="ant-col ant-col-4"
@ -294,7 +303,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
Align Bottom Align Bottom
</p> </p>
<div <div
class="ant-row-flex ant-row-flex-space-between ant-row-flex-bottom" class="ant-row ant-row-space-between ant-row-bottom"
> >
<div <div
class="ant-col ant-col-4" class="ant-col ant-col-4"
@ -339,7 +348,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = ` exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
<div> <div>
<div <div
class="ant-row-flex" class="ant-row"
> >
<div <div
class="ant-col ant-col-6 ant-col-order-4" class="ant-col ant-col-6 ant-col-order-4"
@ -365,6 +374,68 @@ exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
<div>
<p>
Percentage columns
</p>
<div
class="ant-row"
>
<div
class="ant-col"
style="flex:2 2 auto"
>
2 / 5
</div>
<div
class="ant-col"
style="flex:3 3 auto"
>
3 / 5
</div>
</div>
<p>
Fill rest
</p>
<div
class="ant-row"
>
<div
class="ant-col"
style="flex:0 0 100px"
>
100px
</div>
<div
class="ant-col"
style="flex:auto"
>
Fill Rest
</div>
</div>
<p>
Raw flex style
</p>
<div
class="ant-row"
>
<div
class="ant-col"
style="flex:1 1 200px"
>
1 1 200px
</div>
<div
class="ant-col"
style="flex:0 1 300px"
>
0 1 300px
</div>
</div>
</div>
`;
exports[`renders ./components/grid/demo/gutter.md correctly 1`] = ` exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
<div <div
class="gutter-example" class="gutter-example"
@ -416,7 +487,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
</div> </div>
<div <div
class="ant-row" class="ant-row"
style="margin-top:-10px;margin-bottom:-10px" style="margin-top:-10px;margin-bottom:10px"
> >
<div <div
class="ant-col ant-col-6 gutter-row" class="ant-col ant-col-6 gutter-row"
@ -806,7 +877,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
</div> </div>
<div <div
class="ant-row" class="ant-row"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px" style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
> >
<div <div
class="ant-col ant-col-6" class="ant-col ant-col-6"
@ -843,7 +914,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
</div> </div>
<div <div
class="ant-row" class="ant-row"
style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px" style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
> >
<div <div
class="ant-col ant-col-6" class="ant-col ant-col-6"

2
components/grid/__tests__/index.test.js
View File

@ -112,7 +112,7 @@ describe('Grid', () => {
marginLeft: -8, marginLeft: -8,
marginRight: -8, marginRight: -8,
marginTop: -10, marginTop: -10,
marginBottom: -10, marginBottom: 10,
}); });
}); });
}); });

48
components/grid/col.tsx
View File

@ -1,14 +1,13 @@
import * as React from 'react'; import * as React from 'react';
import * as PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import RowContext from './RowContext'; import RowContext from './RowContext';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
// https://github.com/ant-design/ant-design/issues/14324 // https://github.com/ant-design/ant-design/issues/14324
type ColSpanType = number | string; type ColSpanType = number | string;
type FlexType = number | 'none' | 'auto' | string;
export interface ColSize { export interface ColSize {
span?: ColSpanType; span?: ColSpanType;
order?: ColSpanType; order?: ColSpanType;
@ -30,25 +29,22 @@ export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
xl?: ColSpanType | ColSize; xl?: ColSpanType | ColSize;
xxl?: ColSpanType | ColSize; xxl?: ColSpanType | ColSize;
prefixCls?: string; prefixCls?: string;
flex?: FlexType;
}
function parseFlex(flex: FlexType): string {
if (typeof flex === 'number') {
return `${flex} ${flex} auto`;
}
if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
return `0 0 ${flex}`;
}
return flex;
} }
export default class Col extends React.Component<ColProps, {}> { export default class Col extends React.Component<ColProps, {}> {
static propTypes = {
span: PropTypes.number,
order: PropTypes.number,
offset: PropTypes.number,
push: PropTypes.number,
pull: PropTypes.number,
className: PropTypes.string,
children: PropTypes.node,
xs: objectOrNumber,
sm: objectOrNumber,
md: objectOrNumber,
lg: objectOrNumber,
xl: objectOrNumber,
xxl: objectOrNumber,
};
renderCol = ({ getPrefixCls }: ConfigConsumerProps) => { renderCol = ({ getPrefixCls }: ConfigConsumerProps) => {
const { props } = this; const { props } = this;
const { const {
@ -60,6 +56,8 @@ export default class Col extends React.Component<ColProps, {}> {
pull, pull,
className, className,
children, children,
flex,
style,
...others ...others
} = props; } = props;
const prefixCls = getPrefixCls('col', customizePrefixCls); const prefixCls = getPrefixCls('col', customizePrefixCls);
@ -101,10 +99,9 @@ export default class Col extends React.Component<ColProps, {}> {
return ( return (
<RowContext.Consumer> <RowContext.Consumer>
{({ gutter }) => { {({ gutter }) => {
let { style } = others; let mergedStyle: React.CSSProperties = { ...style };
if (gutter) { if (gutter) {
style = { mergedStyle = {
...(gutter[0]! > 0 ...(gutter[0]! > 0
? { ? {
paddingLeft: gutter[0]! / 2, paddingLeft: gutter[0]! / 2,
@ -117,12 +114,15 @@ export default class Col extends React.Component<ColProps, {}> {
paddingBottom: gutter[1]! / 2, paddingBottom: gutter[1]! / 2,
} }
: {}), : {}),
...style, ...mergedStyle,
}; };
} }
if (flex) {
mergedStyle.flex = parseFlex(flex);
}
return ( return (
<div {...others} style={style} className={classes}> <div {...others} style={mergedStyle} className={classes}>
{children} {children}
</div> </div>
); );

3
components/grid/demo/basic.md
View File

@ -22,6 +22,9 @@ import { Row, Col } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<Row>
<Col>col</Col>
</Row>
<Row> <Row>
<Col span={12}>col-12</Col> <Col span={12}>col-12</Col>
<Col span={12}>col-12</Col> <Col span={12}>col-12</Col>

20
components/grid/demo/flex-align.md
View File

@ -1,17 +1,17 @@
--- ---
order: 5 order: 5
title: title:
zh-CN: Flex 对齐 zh-CN: 对齐
en-US: Flex Alignment en-US: Alignment
--- ---
## zh-CN ## zh-CN
Flex 子元素垂直对齐。 子元素垂直对齐。
## en-US ## en-US
Flex child elements vertically aligned. Child elements vertically aligned.
```jsx ```jsx
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
@ -21,7 +21,7 @@ const DemoBox = props => <p className={`height-${props.value}`}>{props.children}
ReactDOM.render( ReactDOM.render(
<div> <div>
<p>Align Top</p> <p>Align Top</p>
<Row type="flex" justify="center" align="top"> <Row justify="center" align="top">
<Col span={4}> <Col span={4}>
<DemoBox value={100}>col-4</DemoBox> <DemoBox value={100}>col-4</DemoBox>
</Col> </Col>
@ -37,7 +37,7 @@ ReactDOM.render(
</Row> </Row>
<p>Align Center</p> <p>Align Center</p>
<Row type="flex" justify="space-around" align="middle"> <Row justify="space-around" align="middle">
<Col span={4}> <Col span={4}>
<DemoBox value={100}>col-4</DemoBox> <DemoBox value={100}>col-4</DemoBox>
</Col> </Col>
@ -53,7 +53,7 @@ ReactDOM.render(
</Row> </Row>
<p>Align Bottom</p> <p>Align Bottom</p>
<Row type="flex" justify="space-between" align="bottom"> <Row justify="space-between" align="bottom">
<Col span={4}> <Col span={4}>
<DemoBox value={100}>col-4</DemoBox> <DemoBox value={100}>col-4</DemoBox>
</Col> </Col>
@ -71,3 +71,9 @@ ReactDOM.render(
mountNode, mountNode,
); );
``` ```
```css
#components-grid-demo-flex-align [class~='ant-row'] {
background: #f5f5f5;
}
```

16
components/grid/demo/flex-order.md
View File

@ -1,24 +1,24 @@
--- ---
order: 6 order: 6
title: title:
zh-CN: Flex 排序 zh-CN: 排序
en-US: Flex Order en-US: Order
--- ---
## zh-CN ## zh-CN
通过 Flex 布局的 Order 来改变元素的排序。 通过 Order 来改变元素的排序。
## en-US ## en-US
To change the element sort by Flex layout order. To change the element sort by order.
```jsx ```jsx
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<Row type="flex"> <Row>
<Col span={6} order={4}> <Col span={6} order={4}>
1 col-order-4 1 col-order-4
</Col> </Col>
@ -36,3 +36,9 @@ ReactDOM.render(
mountNode, mountNode,
); );
``` ```
```css
#components-grid-demo-flex-order [class~='ant-row'] {
background: #f5f5f5;
}
```

39
components/grid/demo/flex-stretch.md Normal file
View File

@ -0,0 +1,39 @@
---
order: 7
title:
zh-CN: Flex 填充
en-US: Flex Stretch
---
## zh-CN
Col 提供 `flex` 属性以支持填充。
## en-US
Col provides `flex` prop to support fill rest.
```jsx
import { Row, Col } from 'antd';
ReactDOM.render(
<div>
<p>Percentage columns</p>
<Row>
<Col flex={2}>2 / 5</Col>
<Col flex={3}>3 / 5</Col>
</Row>
<p>Fill rest</p>
<Row>
<Col flex="100px">100px</Col>
<Col flex="auto">Fill Rest</Col>
</Row>
<p>Raw flex style</p>
<Row>
<Col flex="1 1 200px">1 1 200px</Col>
<Col flex="0 1 300px">0 1 300px</Col>
</Row>
</div>,
mountNode,
);
```

26
components/grid/demo/flex.md
View File

@ -1,19 +1,19 @@
--- ---
order: 4 order: 4
title: title:
zh-CN: Flex 布局 zh-CN: 排版
en-US: Flex Layout en-US: Typesetting
--- ---
## zh-CN ## zh-CN
Flex 布局基础。 布局基础。
使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。 子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
## en-US ## en-US
Use `row-flex` define `flex` layout, its child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node layout mode. Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode.
```jsx ```jsx
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
@ -21,7 +21,7 @@ import { Row, Col } from 'antd';
ReactDOM.render( ReactDOM.render(
<div> <div>
<p>sub-element align left</p> <p>sub-element align left</p>
<Row type="flex" justify="start"> <Row justify="start">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -29,7 +29,7 @@ ReactDOM.render(
</Row> </Row>
<p>sub-element align center</p> <p>sub-element align center</p>
<Row type="flex" justify="center"> <Row justify="center">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -37,7 +37,7 @@ ReactDOM.render(
</Row> </Row>
<p>sub-element align right</p> <p>sub-element align right</p>
<Row type="flex" justify="end"> <Row justify="end">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -45,7 +45,7 @@ ReactDOM.render(
</Row> </Row>
<p>sub-element monospaced arrangement</p> <p>sub-element monospaced arrangement</p>
<Row type="flex" justify="space-between"> <Row justify="space-between">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -53,7 +53,7 @@ ReactDOM.render(
</Row> </Row>
<p>sub-element align full</p> <p>sub-element align full</p>
<Row type="flex" justify="space-around"> <Row justify="space-around">
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
<Col span={4}>col-4</Col> <Col span={4}>col-4</Col>
@ -63,3 +63,9 @@ ReactDOM.render(
mountNode, mountNode,
); );
``` ```
```css
#components-grid-demo-flex [class~='ant-row'] {
background: #f5f5f5;
}
```

2
components/grid/demo/playground.md
View File

@ -1,5 +1,5 @@
--- ---
order: 9 order: 10
title: title:
zh-CN: 栅格配置器 zh-CN: 栅格配置器
en-US: Playground en-US: Playground

2
components/grid/demo/responsive-more.md
View File

@ -1,5 +1,5 @@
--- ---
order: 8 order: 9
title: title:
zh-CN: 其他属性的响应式 zh-CN: 其他属性的响应式
en-US: More responsive en-US: More responsive

2
components/grid/demo/responsive.md
View File

@ -1,5 +1,5 @@
--- ---
order: 7 order: 8
title: title:
zh-CN: 响应式布局 zh-CN: 响应式布局
en-US: Responsive en-US: Responsive

22
components/grid/index.en-US.md
View File

@ -73,11 +73,9 @@ Following is a brief look at how it works:
- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `<Col span={8} />`. - The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `<Col span={8} />`.
- If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement. - If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.
## Flex layout Our grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`.
Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`. Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
## API ## API
@ -90,17 +88,17 @@ If the Ant Design grid layout component does not meet your needs, you can use th
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` | | | align | vertical alignment | `top` `middle` `bottom` | `top` | |
| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `3.24.0`) | number/object/array | 0 | | | gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `3.24.0`) | number/object/array | 0 | | |
| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` | | | justify | horizontal arrangement | `start` `end` `center` `space-around` `space-between` | `start` | |
| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string | | |
### Col ### Col
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| flex | flex layout style | string \| number | - | |
| offset | the number of cells to offset Col from the left | number | 0 | | | offset | the number of cells to offset Col from the left | number | 0 | |
| order | raster order, used in `flex` layout mode | number | 0 | | | order | raster order | number | 0 | |
| pull | the number of cells that raster is moved to the left | number | 0 | | | pull | the number of cells that raster is moved to the left | number | 0 | |
| push | the number of cells that raster is moved to the right | number | 0 | | | push | the number of cells that raster is moved to the right | number | 0 | |
| span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none | | | span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none | |
@ -112,9 +110,3 @@ If the Ant Design grid layout component does not meet your needs, you can use th
| xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - | | | xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - | |
The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`). The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`).
## FAQ
### How to support IE9 when using responsive?
You can use [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) to handle this.

20
components/grid/index.zh-CN.md
View File

@ -72,11 +72,9 @@ title: Grid
- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8} />` 来创建 - 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8} />` 来创建
- 如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列 - 如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列
## Flex 布局 我们的栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
## API ## API
@ -89,17 +87,17 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
| 成员 | 说明 | 类型 | 默认值 | 版本 | | 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` | | | align | 垂直对齐方式 | `top` `middle` `bottom` | `top` | |
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`3.24.0 后支持`）。 | number/object/array | 0 | | | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`3.24.0 后支持`）。 | number/object/array | 0 | |
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` | | | justify | 水平排列方式 | `start` `end` `center` `space-around` `space-between` | `start` | |
| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string | | |
### Col ### Col
| 成员 | 说明 | 类型 | 默认值 | 版本 | | 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| flex | flex 布局属性 | string \| number | - | |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | | | offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 | | | order | 栅格顺序 | number | 0 | |
| pull | 栅格向左移动格数 | number | 0 | | | pull | 栅格向左移动格数 | number | 0 | |
| push | 栅格向右移动格数 | number | 0 | | | push | 栅格向右移动格数 | number | 0 | |
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | | | span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
@ -111,9 +109,3 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | | xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
## FAQ
### IE9 响应式不工作怎么办？
可以引入 [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) 添加支持。

26
components/grid/row.tsx
View File

@ -1,6 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import * as PropTypes from 'prop-types';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import RowContext from './RowContext'; import RowContext from './RowContext';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
@ -16,9 +15,8 @@ const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-betwee
export type Gutter = number | Partial<Record<Breakpoint, number>>; export type Gutter = number | Partial<Record<Breakpoint, number>>;
export interface RowProps extends React.HTMLAttributes<HTMLDivElement> { export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
gutter?: Gutter | [Gutter, Gutter]; gutter?: Gutter | [Gutter, Gutter];
type?: 'flex'; align?: typeof RowAligns[number];
align?: (typeof RowAligns)[number]; justify?: typeof RowJustify[number];
justify?: (typeof RowJustify)[number];
prefixCls?: string; prefixCls?: string;
} }
@ -31,16 +29,6 @@ export default class Row extends React.Component<RowProps, RowState> {
gutter: 0, gutter: 0,
}; };
static propTypes = {
type: PropTypes.oneOf<'flex'>(['flex']),
align: PropTypes.oneOf(RowAligns),
justify: PropTypes.oneOf(RowJustify),
className: PropTypes.string,
children: PropTypes.node,
gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
prefixCls: PropTypes.string,
};
state: RowState = { state: RowState = {
screens: {}, screens: {},
}; };
@ -87,7 +75,6 @@ export default class Row extends React.Component<RowProps, RowState> {
renderRow = ({ getPrefixCls }: ConfigConsumerProps) => { renderRow = ({ getPrefixCls }: ConfigConsumerProps) => {
const { const {
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
type,
justify, justify,
align, align,
className, className,
@ -98,11 +85,10 @@ export default class Row extends React.Component<RowProps, RowState> {
const prefixCls = getPrefixCls('row', customizePrefixCls); const prefixCls = getPrefixCls('row', customizePrefixCls);
const gutter = this.getGutter(); const gutter = this.getGutter();
const classes = classNames( const classes = classNames(
prefixCls,
{ {
[prefixCls]: !type, [`${prefixCls}-${justify}`]: justify,
[`${prefixCls}-${type}`]: type, [`${prefixCls}-${align}`]: align,
[`${prefixCls}-${type}-${justify}`]: type && justify,
[`${prefixCls}-${type}-${align}`]: type && align,
}, },
className, className,
); );
@ -116,7 +102,7 @@ export default class Row extends React.Component<RowProps, RowState> {
...(gutter[1]! > 0 ...(gutter[1]! > 0
? { ? {
marginTop: gutter[1]! / -2, marginTop: gutter[1]! / -2,
marginBottom: gutter[1]! / -2, marginBottom: gutter[1]! / 2,
} }
: {}), : {}),
...style, ...style,

26
components/grid/style/index.less
View File

@ -4,13 +4,6 @@
// Grid system // Grid system
.@{ant-prefix}-row { .@{ant-prefix}-row {
.make-row();
display: block;
box-sizing: border-box;
}
.@{ant-prefix}-row-flex {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -21,52 +14,53 @@
} }
// x轴原点 // x轴原点
.@{ant-prefix}-row-flex-start { .@{ant-prefix}-row-start {
justify-content: flex-start; justify-content: flex-start;
} }
// x轴居中 // x轴居中
.@{ant-prefix}-row-flex-center { .@{ant-prefix}-row-center {
justify-content: center; justify-content: center;
} }
// x轴反方向 // x轴反方向
.@{ant-prefix}-row-flex-end { .@{ant-prefix}-row-end {
justify-content: flex-end; justify-content: flex-end;
} }
// x轴平分 // x轴平分
.@{ant-prefix}-row-flex-space-between { .@{ant-prefix}-row-space-between {
justify-content: space-between; justify-content: space-between;
} }
// x轴有间隔地平分 // x轴有间隔地平分
.@{ant-prefix}-row-flex-space-around { .@{ant-prefix}-row-space-around {
justify-content: space-around; justify-content: space-around;
} }
// 顶部对齐 // 顶部对齐
.@{ant-prefix}-row-flex-top { .@{ant-prefix}-row-top {
align-items: flex-start; align-items: flex-start;
} }
// 居中对齐 // 居中对齐
.@{ant-prefix}-row-flex-middle { .@{ant-prefix}-row-middle {
align-items: center; align-items: center;
} }
// 底部对齐 // 底部对齐
.@{ant-prefix}-row-flex-bottom { .@{ant-prefix}-row-bottom {
align-items: flex-end; align-items: flex-end;
} }
.@{ant-prefix}-col { .@{ant-prefix}-col {
position: relative; position: relative;
flex: 1 auto;
max-width: 100%;
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
} }
.make-grid-columns();
.make-grid(); .make-grid();
// Extra small grid // Extra small grid

52
components/grid/style/mixin.less
View File

@ -2,59 +2,12 @@
// mixins for grid system // mixins for grid system
// ------------------------ // ------------------------
.make-row(@gutter: @grid-gutter-width) {
position: relative;
height: auto;
margin-right: (@gutter / -2);
margin-left: (@gutter / -2);
.clearfix;
}
.make-grid-columns() {
.col(@index) {
@item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) {
@item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
.col((@index + 1), ~'@{list}, @{item}');
}
.col(@index, @list) when (@index > @grid-columns) {
@{list} {
position: relative;
padding-right: (@grid-gutter-width / 2);
padding-left: (@grid-gutter-width / 2);
}
}
.col(1);
}
.float-grid-columns(@class) {
.col(@index) {
// initial
@item: ~'.@{ant-prefix}-col@{class}-@{index}';
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) {
// general
@item: ~'.@{ant-prefix}-col@{class}-@{index}';
.col((@index + 1), ~'@{list}, @{item}');
}
.col(@index, @list) when (@index > @grid-columns) {
// terminal
@{list} {
flex: 0 0 auto;
float: left;
}
}
.col(1); // kickstart it
}
.loop-grid-columns(@index, @class) when (@index > 0) { .loop-grid-columns(@index, @class) when (@index > 0) {
.@{ant-prefix}-col@{class}-@{index} { .@{ant-prefix}-col@{class}-@{index} {
display: block; display: block;
box-sizing: border-box; flex: 0 0 percentage((@index / @grid-columns));
width: percentage((@index / @grid-columns)); max-width: percentage((@index / @grid-columns));
} }
.@{ant-prefix}-col@{class}-push-@{index} { .@{ant-prefix}-col@{class}-push-@{index} {
left: percentage((@index / @grid-columns)); left: percentage((@index / @grid-columns));
@ -96,6 +49,5 @@
} }
.make-grid(@class: ~'') { .make-grid(@class: ~'') {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class); .loop-grid-columns(@grid-columns, @class);
} }

4
components/mention/__tests__/__snapshots__/demo.test.js.snap
View File

@ -254,7 +254,7 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
class="ant-form ant-form-horizontal" class="ant-form ant-form-horizontal"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -336,7 +336,7 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control" class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"

6
components/mentions/__tests__/__snapshots__/demo.test.js.snap
View File

@ -29,7 +29,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
class="ant-form ant-form-horizontal" class="ant-form ant-form-horizontal"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -51,7 +51,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-6 ant-form-item-label" class="ant-col ant-col-6 ant-form-item-label"
@ -83,7 +83,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control" class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"

6
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -273,7 +273,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
class="ant-page-header-content" class="ant-page-header-content"
> >
<div <div
class="ant-row-flex" class="ant-row"
> >
<div <div
class="ant-statistic" class="ant-statistic"
@ -634,7 +634,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
class="ant-page-header-content" class="ant-page-header-content"
> >
<div <div
class="ant-row-flex content" class="ant-row content"
> >
<div <div
class="main" class="main"
@ -654,7 +654,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams. Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
</div> </div>
<div <div
class="ant-row-flex contentLink" class="ant-row contentLink"
> >
<a <a
style="margin-right:16px;display:flex;align-items:center" style="margin-right:16px;display:flex;align-items:center"

2
components/page-header/demo/actions.md
View File

@ -59,7 +59,7 @@ ReactDOM.render(
</Button>, </Button>,
]} ]}
> >
<Row type="flex"> <Row>
<Statistic title="Status" value="Pending" /> <Statistic title="Status" value="Pending" />
<Statistic <Statistic
title="Price" title="Price"

4
components/page-header/demo/content.md
View File

@ -104,7 +104,7 @@ const content = (
easier for designers to have a clear psychological expectation of color when adjusting colors, easier for designers to have a clear psychological expectation of color when adjusting colors,
as well as facilitate communication in teams. as well as facilitate communication in teams.
</Paragraph> </Paragraph>
<Row className="contentLink" type="flex"> <Row className="contentLink">
<IconLink <IconLink
src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
text="Quick Start" text="Quick Start"
@ -123,7 +123,7 @@ const content = (
const Content = ({ children, extraContent }) => { const Content = ({ children, extraContent }) => {
return ( return (
<Row className="content" type="flex"> <Row className="content">
<div className="main" style={{ flex: 1 }}> <div className="main" style={{ flex: 1 }}>
{children} {children}
</div> </div>

28
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1663,7 +1663,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
style="margin-bottom:16px" style="margin-bottom:16px"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1695,7 +1695,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1727,7 +1727,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1759,7 +1759,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1792,7 +1792,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1825,7 +1825,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1858,7 +1858,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1891,7 +1891,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1923,7 +1923,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1956,7 +1956,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -1988,7 +1988,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -2072,7 +2072,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -2155,7 +2155,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"
@ -2219,7 +2219,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</div> </div>
</div> </div>
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-form-item-label" class="ant-col ant-form-item-label"

2
components/upload/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1478,7 +1478,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
class="ant-form ant-form-horizontal" class="ant-form ant-form-horizontal"
> >
<div <div
class="ant-row-flex ant-form-item" class="ant-row ant-form-item"
> >
<div <div
class="ant-col ant-col-4 ant-form-item-label" class="ant-col ant-col-4 ant-form-item-label"

11
site/theme/static/markdown.less
View File

@ -319,14 +319,8 @@
transparent 95.83333333% transparent 95.83333333%
); );
} }
.ant-row-flex,
.code-box-demo .ant-row-flex {
background: #f5f5f5;
}
.ant-row > div, .ant-row > div,
.code-box-demo .ant-row > div, .code-box-demo .ant-row > div {
.ant-row-flex > div,
.code-box-demo .ant-row-flex > div {
min-height: 30px; min-height: 30px;
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
@ -335,8 +329,7 @@
text-align: center; text-align: center;
border-radius: 0; border-radius: 0;
} }
.code-box-demo .ant-row > div:not(.gutter-row), .code-box-demo .ant-row > div:not(.gutter-row) {
.code-box-demo .ant-row-flex > div:not(.gutter-row) {
padding: 16px 0; padding: 16px 0;
background: #00a0e9; background: #00a0e9;
&:nth-child(2n + 1) { &:nth-child(2n + 1) {