mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
54fb6bd831
* feat: Form.Item support noLabel * feat: doc * feat: test * feat: test * feat: test * feat: review * feat: review * feat: 仅支持 span * feat: review * feat: review * feat: review * feat: review * feat: review * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: add test * feat: demo * feat: test * feat: test * feat: test * feat: 代码优化 * feat: add labelCol * feat: 代码优化 * feat: 代码优化 * feat: reset * feat: test * feat: test * feat: review * feat: doc
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Button, Form, Input, Select, Space, Tooltip, Typography } from 'antd';
|
|
|
|
const { Option } = Select;
|
|
|
|
const onFinish = (values: any) => {
|
|
console.log('Received values of form: ', values);
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<Form
|
|
name="complex-form"
|
|
onFinish={onFinish}
|
|
labelCol={{ span: 8 }}
|
|
wrapperCol={{ span: 16 }}
|
|
style={{ maxWidth: 600 }}
|
|
>
|
|
<Form.Item label="Username">
|
|
<Space>
|
|
<Form.Item
|
|
name="username"
|
|
noStyle
|
|
rules={[{ required: true, message: 'Username is required' }]}
|
|
>
|
|
<Input style={{ width: 160 }} placeholder="Please input" />
|
|
</Form.Item>
|
|
<Tooltip title="Useful information">
|
|
<Typography.Link href="#API">Need Help?</Typography.Link>
|
|
</Tooltip>
|
|
</Space>
|
|
</Form.Item>
|
|
<Form.Item label="Address">
|
|
<Space.Compact>
|
|
<Form.Item
|
|
name={['address', 'province']}
|
|
noStyle
|
|
rules={[{ required: true, message: 'Province is required' }]}
|
|
>
|
|
<Select placeholder="Select province">
|
|
<Option value="Zhejiang">Zhejiang</Option>
|
|
<Option value="Jiangsu">Jiangsu</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name={['address', 'street']}
|
|
noStyle
|
|
rules={[{ required: true, message: 'Street is required' }]}
|
|
>
|
|
<Input style={{ width: '50%' }} placeholder="Input street" />
|
|
</Form.Item>
|
|
</Space.Compact>
|
|
</Form.Item>
|
|
<Form.Item label="BirthDate" style={{ marginBottom: 0 }}>
|
|
<Form.Item
|
|
name="year"
|
|
rules={[{ required: true }]}
|
|
style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
|
|
>
|
|
<Input placeholder="Input birth year" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="month"
|
|
rules={[{ required: true }]}
|
|
style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
|
|
>
|
|
<Input placeholder="Input birth month" />
|
|
</Form.Item>
|
|
</Form.Item>
|
|
<Form.Item label={null}>
|
|
<Button type="primary" htmlType="submit">
|
|
Submit
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
|
|
export default App;
|