mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
feat: Col support flex prop (#16635)
* 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:
二货机器人
GitHub
parent
9da09ffb2a
commit
efd3b35830
@ -167,7 +167,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
|
||||
style="margin:0 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
|
||||
|
||||
@ -2128,7 +2128,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
|
||||
Custom header
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex"
|
||||
class="ant-row"
|
||||
style="margin-left:-4px;margin-right:-4px;flex-wrap:nowrap"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -60,7 +60,7 @@ ReactDOM.render(
|
||||
return (
|
||||
<div style={{ padding: 10 }}>
|
||||
<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' }}>
|
||||
<Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
|
||||
<Button value="month">Month</Button>
|
||||
|
||||
@ -152,7 +152,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
@ -168,7 +168,7 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
|
||||
@ -7028,7 +7028,7 @@ exports[`ConfigProvider components Form configProvider 1`] = `
|
||||
class="config-form config-form-horizontal"
|
||||
>
|
||||
<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
|
||||
class="config-col config-form-item-control"
|
||||
@ -7052,7 +7052,7 @@ exports[`ConfigProvider components Form normal 1`] = `
|
||||
class="ant-form ant-form-horizontal"
|
||||
>
|
||||
<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
|
||||
class="ant-col ant-form-item-control"
|
||||
@ -7076,7 +7076,7 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
|
||||
class="prefix-Form prefix-Form-horizontal"
|
||||
>
|
||||
<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
|
||||
class="ant-col prefix-Form-item-control"
|
||||
|
||||
@ -196,7 +196,6 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
|
||||
|
||||
return (
|
||||
<Row
|
||||
type="flex"
|
||||
className={classNames(itemClassName)}
|
||||
style={style}
|
||||
key="row"
|
||||
|
||||
@ -15,7 +15,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
|
||||
style="padding-left:12px;padding-right:12px"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -287,7 +287,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
|
||||
id="basic"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
valuepropname="checked"
|
||||
>
|
||||
<div
|
||||
@ -411,7 +411,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
@ -862,7 +862,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<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"
|
||||
@ -908,7 +908,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<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"
|
||||
@ -936,7 +936,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
|
||||
id="dynamic_rule"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1234,7 +1234,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
|
||||
id="horizontal_login"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
@ -1282,7 +1282,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
@ -1330,7 +1330,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
@ -1818,7 +1818,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
@ -1866,7 +1866,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
@ -1904,7 +1904,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
@ -1938,7 +1938,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
id="register"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
valuepropname="checked"
|
||||
>
|
||||
<div
|
||||
@ -2474,7 +2474,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<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"
|
||||
@ -2502,7 +2502,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
|
||||
id="time_related_controls"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<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"
|
||||
@ -2905,7 +2905,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
id="validate_other"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
valuepropname="checked"
|
||||
>
|
||||
<div
|
||||
@ -3215,7 +3215,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
valuepropname="fileList"
|
||||
>
|
||||
<div
|
||||
@ -4016,7 +4016,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<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
|
||||
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
|
||||
class="ant-row-flex ant-form-item ant-form-item-has-warning"
|
||||
class="ant-row ant-form-item ant-form-item-has-warning"
|
||||
>
|
||||
<div
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
style="margin-bottom:0"
|
||||
>
|
||||
<div
|
||||
@ -4566,7 +4566,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<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)"
|
||||
>
|
||||
<div
|
||||
@ -4616,7 +4616,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
-
|
||||
</span>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
style="display:inline-block;width:calc(50% - 12px)"
|
||||
>
|
||||
<div
|
||||
@ -4664,7 +4664,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</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
|
||||
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"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-7 ant-form-item-label"
|
||||
|
||||
@ -7,7 +7,7 @@ exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`]
|
||||
<div
|
||||
aria-hidden="true"
|
||||
cccc="bbbb"
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
data-text="123"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -2,6 +2,15 @@
|
||||
|
||||
exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
>
|
||||
col
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
@ -68,7 +77,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
sub-element align left
|
||||
</p>
|
||||
<div
|
||||
class="ant-row-flex ant-row-flex-start"
|
||||
class="ant-row ant-row-start"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4"
|
||||
@ -95,7 +104,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
sub-element align center
|
||||
</p>
|
||||
<div
|
||||
class="ant-row-flex ant-row-flex-center"
|
||||
class="ant-row ant-row-center"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4"
|
||||
@ -122,7 +131,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
sub-element align right
|
||||
</p>
|
||||
<div
|
||||
class="ant-row-flex ant-row-flex-end"
|
||||
class="ant-row ant-row-end"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4"
|
||||
@ -149,7 +158,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
sub-element monospaced arrangement
|
||||
</p>
|
||||
<div
|
||||
class="ant-row-flex ant-row-flex-space-between"
|
||||
class="ant-row ant-row-space-between"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4"
|
||||
@ -176,7 +185,7 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
sub-element align full
|
||||
</p>
|
||||
<div
|
||||
class="ant-row-flex ant-row-flex-space-around"
|
||||
class="ant-row ant-row-space-around"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4"
|
||||
@ -208,7 +217,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
|
||||
Align Top
|
||||
</p>
|
||||
<div
|
||||
class="ant-row-flex ant-row-flex-center ant-row-flex-top"
|
||||
class="ant-row ant-row-center ant-row-top"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4"
|
||||
@ -251,7 +260,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
|
||||
Align Center
|
||||
</p>
|
||||
<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
|
||||
class="ant-col ant-col-4"
|
||||
@ -294,7 +303,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
|
||||
Align Bottom
|
||||
</p>
|
||||
<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
|
||||
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`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-row-flex"
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
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>
|
||||
`;
|
||||
|
||||
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`] = `
|
||||
<div
|
||||
class="gutter-example"
|
||||
@ -416,7 +487,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-top:-10px;margin-bottom:-10px"
|
||||
style="margin-top:-10px;margin-bottom:10px"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6 gutter-row"
|
||||
@ -806,7 +877,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
class="ant-col ant-col-6"
|
||||
@ -843,7 +914,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
class="ant-col ant-col-6"
|
||||
|
||||
@ -112,7 +112,7 @@ describe('Grid', () => {
|
||||
marginLeft: -8,
|
||||
marginRight: -8,
|
||||
marginTop: -10,
|
||||
marginBottom: -10,
|
||||
marginBottom: 10,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import RowContext from './RowContext';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/14324
|
||||
type ColSpanType = number | string;
|
||||
|
||||
type FlexType = number | 'none' | 'auto' | string;
|
||||
|
||||
export interface ColSize {
|
||||
span?: ColSpanType;
|
||||
order?: ColSpanType;
|
||||
@ -30,25 +29,22 @@ export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
xl?: ColSpanType | ColSize;
|
||||
xxl?: ColSpanType | ColSize;
|
||||
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, {}> {
|
||||
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) => {
|
||||
const { props } = this;
|
||||
const {
|
||||
@ -60,6 +56,8 @@ export default class Col extends React.Component<ColProps, {}> {
|
||||
pull,
|
||||
className,
|
||||
children,
|
||||
flex,
|
||||
style,
|
||||
...others
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('col', customizePrefixCls);
|
||||
@ -101,10 +99,9 @@ export default class Col extends React.Component<ColProps, {}> {
|
||||
return (
|
||||
<RowContext.Consumer>
|
||||
{({ gutter }) => {
|
||||
let { style } = others;
|
||||
|
||||
let mergedStyle: React.CSSProperties = { ...style };
|
||||
if (gutter) {
|
||||
style = {
|
||||
mergedStyle = {
|
||||
...(gutter[0]! > 0
|
||||
? {
|
||||
paddingLeft: gutter[0]! / 2,
|
||||
@ -117,12 +114,15 @@ export default class Col extends React.Component<ColProps, {}> {
|
||||
paddingBottom: gutter[1]! / 2,
|
||||
}
|
||||
: {}),
|
||||
...style,
|
||||
...mergedStyle,
|
||||
};
|
||||
}
|
||||
if (flex) {
|
||||
mergedStyle.flex = parseFlex(flex);
|
||||
}
|
||||
|
||||
return (
|
||||
<div {...others} style={style} className={classes}>
|
||||
<div {...others} style={mergedStyle} className={classes}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -22,6 +22,9 @@ import { Row, Col } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Row>
|
||||
<Col>col</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={12}>col-12</Col>
|
||||
<Col span={12}>col-12</Col>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: Flex 对齐
|
||||
en-US: Flex Alignment
|
||||
zh-CN: 对齐
|
||||
en-US: Alignment
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
Flex 子元素垂直对齐。
|
||||
子元素垂直对齐。
|
||||
|
||||
## en-US
|
||||
|
||||
Flex child elements vertically aligned.
|
||||
Child elements vertically aligned.
|
||||
|
||||
```jsx
|
||||
import { Row, Col } from 'antd';
|
||||
@ -21,7 +21,7 @@ const DemoBox = props => <p className={`height-${props.value}`}>{props.children}
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<p>Align Top</p>
|
||||
<Row type="flex" justify="center" align="top">
|
||||
<Row justify="center" align="top">
|
||||
<Col span={4}>
|
||||
<DemoBox value={100}>col-4</DemoBox>
|
||||
</Col>
|
||||
@ -37,7 +37,7 @@ ReactDOM.render(
|
||||
</Row>
|
||||
|
||||
<p>Align Center</p>
|
||||
<Row type="flex" justify="space-around" align="middle">
|
||||
<Row justify="space-around" align="middle">
|
||||
<Col span={4}>
|
||||
<DemoBox value={100}>col-4</DemoBox>
|
||||
</Col>
|
||||
@ -53,7 +53,7 @@ ReactDOM.render(
|
||||
</Row>
|
||||
|
||||
<p>Align Bottom</p>
|
||||
<Row type="flex" justify="space-between" align="bottom">
|
||||
<Row justify="space-between" align="bottom">
|
||||
<Col span={4}>
|
||||
<DemoBox value={100}>col-4</DemoBox>
|
||||
</Col>
|
||||
@ -71,3 +71,9 @@ ReactDOM.render(
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
#components-grid-demo-flex-align [class~='ant-row'] {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: Flex 排序
|
||||
en-US: Flex Order
|
||||
zh-CN: 排序
|
||||
en-US: Order
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过 Flex 布局的 Order 来改变元素的排序。
|
||||
通过 Order 来改变元素的排序。
|
||||
|
||||
## en-US
|
||||
|
||||
To change the element sort by Flex layout order.
|
||||
To change the element sort by order.
|
||||
|
||||
```jsx
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Row type="flex">
|
||||
<Row>
|
||||
<Col span={6} order={4}>
|
||||
1 col-order-4
|
||||
</Col>
|
||||
@ -36,3 +36,9 @@ ReactDOM.render(
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
#components-grid-demo-flex-order [class~='ant-row'] {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
```
|
||||
|
||||
39
components/grid/demo/flex-stretch.md
Normal file
39
components/grid/demo/flex-stretch.md
Normal 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,
|
||||
);
|
||||
```
|
||||
@ -1,19 +1,19 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: Flex 布局
|
||||
en-US: Flex Layout
|
||||
zh-CN: 排版
|
||||
en-US: Typesetting
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
Flex 布局基础。
|
||||
布局基础。
|
||||
|
||||
使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
|
||||
子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
|
||||
|
||||
## 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
|
||||
import { Row, Col } from 'antd';
|
||||
@ -21,7 +21,7 @@ import { Row, Col } from 'antd';
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<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>
|
||||
@ -29,7 +29,7 @@ ReactDOM.render(
|
||||
</Row>
|
||||
|
||||
<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>
|
||||
@ -37,7 +37,7 @@ ReactDOM.render(
|
||||
</Row>
|
||||
|
||||
<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>
|
||||
@ -45,7 +45,7 @@ ReactDOM.render(
|
||||
</Row>
|
||||
|
||||
<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>
|
||||
@ -53,7 +53,7 @@ ReactDOM.render(
|
||||
</Row>
|
||||
|
||||
<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>
|
||||
@ -63,3 +63,9 @@ ReactDOM.render(
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
```css
|
||||
#components-grid-demo-flex [class~='ant-row'] {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 9
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 栅格配置器
|
||||
en-US: Playground
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 8
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 其他属性的响应式
|
||||
en-US: More responsive
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 7
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 响应式布局
|
||||
en-US: Responsive
|
||||
|
||||
@ -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} />`.
|
||||
- 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`.
|
||||
|
||||
Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
|
||||
Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
|
||||
|
||||
## 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 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `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 | |
|
||||
| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` | |
|
||||
| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string | | |
|
||||
| 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 | | |
|
||||
| justify | horizontal arrangement | `start` `end` `center` `space-around` `space-between` | `start` | |
|
||||
|
||||
### Col
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| flex | flex layout style | string \| number | - | |
|
||||
| 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 | |
|
||||
| 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 | |
|
||||
@ -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 | - | |
|
||||
|
||||
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.
|
||||
|
||||
@ -72,11 +72,9 @@ title: Grid
|
||||
- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8} />` 来创建
|
||||
- 如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列
|
||||
|
||||
## Flex 布局
|
||||
我们的栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
|
||||
|
||||
我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
|
||||
|
||||
Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
|
||||
布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
|
||||
|
||||
## 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 | |
|
||||
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` | |
|
||||
| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string | | |
|
||||
| justify | 水平排列方式 | `start` `end` `center` `space-around` `space-between` | `start` | |
|
||||
|
||||
### Col
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| flex | flex 布局属性 | string \| number | - | |
|
||||
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |
|
||||
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 | |
|
||||
| order | 栅格顺序 | number | 0 | |
|
||||
| pull | 栅格向左移动格数 | number | 0 | |
|
||||
| push | 栅格向右移动格数 | number | 0 | |
|
||||
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
|
||||
@ -111,9 +109,3 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
|
||||
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
|
||||
|
||||
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
|
||||
|
||||
## FAQ
|
||||
|
||||
### IE9 响应式不工作怎么办？
|
||||
|
||||
可以引入 [matchMedia polyfill](https://github.com/paulirish/matchMedia.js/) 添加支持。
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import RowContext from './RowContext';
|
||||
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 interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
gutter?: Gutter | [Gutter, Gutter];
|
||||
type?: 'flex';
|
||||
align?: (typeof RowAligns)[number];
|
||||
justify?: (typeof RowJustify)[number];
|
||||
align?: typeof RowAligns[number];
|
||||
justify?: typeof RowJustify[number];
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
@ -31,16 +29,6 @@ export default class Row extends React.Component<RowProps, RowState> {
|
||||
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 = {
|
||||
screens: {},
|
||||
};
|
||||
@ -87,7 +75,6 @@ export default class Row extends React.Component<RowProps, RowState> {
|
||||
renderRow = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
type,
|
||||
justify,
|
||||
align,
|
||||
className,
|
||||
@ -98,11 +85,10 @@ export default class Row extends React.Component<RowProps, RowState> {
|
||||
const prefixCls = getPrefixCls('row', customizePrefixCls);
|
||||
const gutter = this.getGutter();
|
||||
const classes = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[prefixCls]: !type,
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
[`${prefixCls}-${type}-${justify}`]: type && justify,
|
||||
[`${prefixCls}-${type}-${align}`]: type && align,
|
||||
[`${prefixCls}-${justify}`]: justify,
|
||||
[`${prefixCls}-${align}`]: align,
|
||||
},
|
||||
className,
|
||||
);
|
||||
@ -116,7 +102,7 @@ export default class Row extends React.Component<RowProps, RowState> {
|
||||
...(gutter[1]! > 0
|
||||
? {
|
||||
marginTop: gutter[1]! / -2,
|
||||
marginBottom: gutter[1]! / -2,
|
||||
marginBottom: gutter[1]! / 2,
|
||||
}
|
||||
: {}),
|
||||
...style,
|
||||
|
||||
@ -4,13 +4,6 @@
|
||||
|
||||
// Grid system
|
||||
.@{ant-prefix}-row {
|
||||
.make-row();
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-row-flex {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
@ -21,52 +14,53 @@
|
||||
}
|
||||
|
||||
// x轴原点
|
||||
.@{ant-prefix}-row-flex-start {
|
||||
.@{ant-prefix}-row-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
// x轴居中
|
||||
.@{ant-prefix}-row-flex-center {
|
||||
.@{ant-prefix}-row-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// x轴反方向
|
||||
.@{ant-prefix}-row-flex-end {
|
||||
.@{ant-prefix}-row-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// x轴平分
|
||||
.@{ant-prefix}-row-flex-space-between {
|
||||
.@{ant-prefix}-row-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// x轴有间隔地平分
|
||||
.@{ant-prefix}-row-flex-space-around {
|
||||
.@{ant-prefix}-row-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
// 顶部对齐
|
||||
.@{ant-prefix}-row-flex-top {
|
||||
.@{ant-prefix}-row-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// 居中对齐
|
||||
.@{ant-prefix}-row-flex-middle {
|
||||
.@{ant-prefix}-row-middle {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 底部对齐
|
||||
.@{ant-prefix}-row-flex-bottom {
|
||||
.@{ant-prefix}-row-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-col {
|
||||
position: relative;
|
||||
flex: 1 auto;
|
||||
max-width: 100%;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.make-grid-columns();
|
||||
.make-grid();
|
||||
|
||||
// Extra small grid
|
||||
|
||||
@ -2,59 +2,12 @@
|
||||
|
||||
// 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) {
|
||||
.@{ant-prefix}-col@{class}-@{index} {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: percentage((@index / @grid-columns));
|
||||
flex: 0 0 percentage((@index / @grid-columns));
|
||||
max-width: percentage((@index / @grid-columns));
|
||||
}
|
||||
.@{ant-prefix}-col@{class}-push-@{index} {
|
||||
left: percentage((@index / @grid-columns));
|
||||
@ -96,6 +49,5 @@
|
||||
}
|
||||
|
||||
.make-grid(@class: ~'') {
|
||||
.float-grid-columns(@class);
|
||||
.loop-grid-columns(@grid-columns, @class);
|
||||
}
|
||||
|
||||
@ -254,7 +254,7 @@ exports[`renders ./components/mention/demo/controlled.md correctly 1`] = `
|
||||
class="ant-form ant-form-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
|
||||
|
||||
@ -29,7 +29,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
|
||||
class="ant-form ant-form-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
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
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
|
||||
|
||||
@ -273,7 +273,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
|
||||
class="ant-page-header-content"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex"
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic"
|
||||
@ -634,7 +634,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
|
||||
class="ant-page-header-content"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex content"
|
||||
class="ant-row content"
|
||||
>
|
||||
<div
|
||||
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.
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex contentLink"
|
||||
class="ant-row contentLink"
|
||||
>
|
||||
<a
|
||||
style="margin-right:16px;display:flex;align-items:center"
|
||||
|
||||
@ -59,7 +59,7 @@ ReactDOM.render(
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
<Row type="flex">
|
||||
<Row>
|
||||
<Statistic title="Status" value="Pending" />
|
||||
<Statistic
|
||||
title="Price"
|
||||
|
||||
@ -104,7 +104,7 @@ const content = (
|
||||
easier for designers to have a clear psychological expectation of color when adjusting colors,
|
||||
as well as facilitate communication in teams.
|
||||
</Paragraph>
|
||||
<Row className="contentLink" type="flex">
|
||||
<Row className="contentLink">
|
||||
<IconLink
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
|
||||
text="Quick Start"
|
||||
@ -123,7 +123,7 @@ const content = (
|
||||
|
||||
const Content = ({ children, extraContent }) => {
|
||||
return (
|
||||
<Row className="content" type="flex">
|
||||
<Row className="content">
|
||||
<div className="main" style={{ flex: 1 }}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@ -1663,7 +1663,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1695,7 +1695,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1727,7 +1727,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1759,7 +1759,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1792,7 +1792,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1825,7 +1825,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1858,7 +1858,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1891,7 +1891,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1923,7 +1923,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1956,7 +1956,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -1988,7 +1988,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -2072,7 +2072,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -2155,7 +2155,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
@ -2219,7 +2219,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
|
||||
@ -1478,7 +1478,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
|
||||
class="ant-form ant-form-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-row-flex ant-form-item"
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-4 ant-form-item-label"
|
||||
|
||||
@ -319,14 +319,8 @@
|
||||
transparent 95.83333333%
|
||||
);
|
||||
}
|
||||
.ant-row-flex,
|
||||
.code-box-demo .ant-row-flex {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.ant-row > div,
|
||||
.code-box-demo .ant-row > div,
|
||||
.ant-row-flex > div,
|
||||
.code-box-demo .ant-row-flex > div {
|
||||
.code-box-demo .ant-row > div {
|
||||
min-height: 30px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -335,8 +329,7 @@
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
.code-box-demo .ant-row > div:not(.gutter-row),
|
||||
.code-box-demo .ant-row-flex > div:not(.gutter-row) {
|
||||
.code-box-demo .ant-row > div:not(.gutter-row) {
|
||||
padding: 16px 0;
|
||||
background: #00a0e9;
|
||||
&:nth-child(2n + 1) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user