ant-design/components/form/demo/col-24-debug.tsx
碳苯 Carbon 093c6c2d1f
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
docs: add target properties to all external url link (#51917)
2024-12-06 10:28:15 +08:00

122 lines
2.8 KiB
TypeScript

import React from 'react';
import { Button, Divider, Form, Input, Select } from 'antd';
const sharedItem = (
<Form.Item
label={
<a
href="https://github.com/ant-design/ant-design/issues/36459"
target="_blank"
rel="noreferrer"
>
#36459
</a>
}
initialValue={['bamboo']}
name="select"
style={{ boxShadow: '0 0 3px red' }}
>
<Select
style={{ width: '70%' }}
mode="multiple"
options={[
{ label: 'Bamboo', value: 'bamboo' },
{ label: 'Little', value: 'little' },
{ label: 'Light', value: 'light' },
]}
/>
</Form.Item>
);
const App: React.FC = () => {
const onFinish = (values: any) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
return (
<>
<Form
name="col-24-debug"
labelCol={{ span: 24 }}
wrapperCol={{ span: 24 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
style={{ maxWidth: 600 }}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
{sharedItem}
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
<Form
name="responsive"
labelCol={{ sm: 24, xl: 24 }}
wrapperCol={{ sm: 24, xl: 24 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
<Divider />
<Form layout="vertical">
{sharedItem}
<Form.Item label="col12" name="col12" labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
<Input />
</Form.Item>
</Form>
</>
);
};
export default App;