mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

demo(form): improve layout demo (#50933)

Browse Source
This commit is contained in:
thinkasany 2024-09-20 11:51:25 +08:00 committed by GitHub
parent 9385ed0bc8
commit 9b7adc1859
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -8819,7 +8819,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
class="ant-col ant-form-item-label"
>
<label
class=""
@ -8830,7 +8830,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
class="ant-col ant-form-item-control"
>
<div
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"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
class="ant-col ant-form-item-label"
>
<label
class=""
@ -8923,7 +8923,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
class="ant-col ant-form-item-control"
>
<div
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"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
class="ant-col ant-form-item-label"
>
<label
class=""
@ -8959,7 +8959,7 @@ exports[`renders components/form/demo/layout.tsx extend context correctly 1`] =
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
class="ant-col ant-form-item-control"
>
<div
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"
>
<div
class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control"
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"

14
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -5147,7 +5147,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
class="ant-col ant-form-item-label"
>
<label
class=""
@ -5158,7 +5158,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
class="ant-col ant-form-item-control"
>
<div
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"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
class="ant-col ant-form-item-label"
>
<label
class=""
@ -5251,7 +5251,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
class="ant-col ant-form-item-control"
>
<div
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"
>
<div
class="ant-col ant-col-4 ant-form-item-label"
class="ant-col ant-form-item-label"
>
<label
class=""
@ -5287,7 +5287,7 @@ exports[`renders components/form/demo/layout.tsx correctly 1`] = `
</label>
</div>
<div
class="ant-col ant-col-14 ant-form-item-control"
class="ant-col ant-form-item-control"
>
<div
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"
>
<div
class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control"
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"

9
components/form/demo/layout.tsx
View File

@ -11,15 +11,8 @@ const App: React.FC = () => {
setFormLayout(layout);
};
const formItemLayout =
formLayout === 'horizontal' ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } } : null;
const buttonItemLayout =
formLayout === 'horizontal' ? { wrapperCol: { span: 14, offset: 4 } } : null;
return (
<Form
{...formItemLayout}
layout={formLayout}
form={form}
initialValues={{ layout: formLayout }}
@ -39,7 +32,7 @@ const App: React.FC = () => {
<Form.Item label="Field B">
<Input placeholder="input placeholder" />
</Form.Item>
<Form.Item {...buttonItemLayout}>
<Form.Item>
<Button type="primary">Submit</Button>
</Form.Item>
</Form>