mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-29 18:50:00 +08:00
demo(form): improve layout demo (#50933)
This commit is contained in:
parent
9385ed0bc8
commit
9b7adc1859
@ -8819,7 +8819,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
|
|||||||
class="ant-row ant-form-item-row"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-4 ant-form-item-label"
|
class="ant-col ant-form-item-label"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class=""
|
class=""
|
||||||
@ -8830,7 +8830,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-14 ant-form-item-control"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input"
|
||||||
@ -8913,7 +8913,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
|
|||||||
class="ant-row ant-form-item-row"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-4 ant-form-item-label"
|
class="ant-col ant-form-item-label"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class=""
|
class=""
|
||||||
@ -8923,7 +8923,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-14 ant-form-item-control"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input"
|
||||||
@ -8949,7 +8949,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
|
|||||||
class="ant-row ant-form-item-row"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-4 ant-form-item-label"
|
class="ant-col ant-form-item-label"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class=""
|
class=""
|
||||||
@ -8959,7 +8959,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-14 ant-form-item-control"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input"
|
||||||
@ -8985,7 +8985,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
|
|||||||
class="ant-row ant-form-item-row"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input"
|
||||||
|
@ -5147,7 +5147,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
|
|||||||
class="ant-row ant-form-item-row"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-4 ant-form-item-label"
|
class="ant-col ant-form-item-label"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class=""
|
class=""
|
||||||
@ -5158,7 +5158,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-14 ant-form-item-control"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input"
|
||||||
@ -5241,7 +5241,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
|
|||||||
class="ant-row ant-form-item-row"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-4 ant-form-item-label"
|
class="ant-col ant-form-item-label"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class=""
|
class=""
|
||||||
@ -5251,7 +5251,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-14 ant-form-item-control"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input"
|
||||||
@ -5277,7 +5277,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
|
|||||||
class="ant-row ant-form-item-row"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-4 ant-form-item-label"
|
class="ant-col ant-form-item-label"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
class=""
|
class=""
|
||||||
@ -5287,7 +5287,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-14 ant-form-item-control"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input"
|
||||||
@ -5313,7 +5313,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
|
|||||||
class="ant-row ant-form-item-row"
|
class="ant-row ant-form-item-row"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control"
|
class="ant-col ant-form-item-control"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-form-item-control-input"
|
class="ant-form-item-control-input"
|
||||||
|
@ -11,15 +11,8 @@ const App: React.FC = () => {
|
|||||||
setFormLayout(layout);
|
setFormLayout(layout);
|
||||||
};
|
};
|
||||||
|
|
||||||
const formItemLayout =
|
|
||||||
formLayout === 'horizontal' ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } } : null;
|
|
||||||
|
|
||||||
const buttonItemLayout =
|
|
||||||
formLayout === 'horizontal' ? { wrapperCol: { span: 14, offset: 4 } } : null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
{...formItemLayout}
|
|
||||||
layout={formLayout}
|
layout={formLayout}
|
||||||
form={form}
|
form={form}
|
||||||
initialValues={{ layout: formLayout }}
|
initialValues={{ layout: formLayout }}
|
||||||
@ -39,7 +32,7 @@ const App: React.FC = () => {
|
|||||||
<Form.Item label="Field B">
|
<Form.Item label="Field B">
|
||||||
<Input placeholder="input placeholder" />
|
<Input placeholder="input placeholder" />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item {...buttonItemLayout}>
|
<Form.Item>
|
||||||
<Button type="primary">Submit</Button>
|
<Button type="primary">Submit</Button>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
|
Loading…
Reference in New Issue
Block a user