mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 07:39:10 +08:00
b9a6b7b578
* demo: update demo * add form * clear * add Select * add * fix style * fix style * fix * revert
150 lines
4.1 KiB
TypeScript
150 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { SmileOutlined } from '@ant-design/icons';
|
|
import {
|
|
Cascader,
|
|
DatePicker,
|
|
Form,
|
|
Input,
|
|
InputNumber,
|
|
Mentions,
|
|
Select,
|
|
TimePicker,
|
|
TreeSelect,
|
|
} from 'antd';
|
|
|
|
const { Option } = Select;
|
|
|
|
const formItemLayout = {
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 6 },
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 14 },
|
|
},
|
|
};
|
|
|
|
const App: React.FC = () => (
|
|
<Form {...formItemLayout} style={{ maxWidth: 600 }}>
|
|
<Form.Item
|
|
label="Fail"
|
|
validateStatus="error"
|
|
help="Should be combination of numbers & alphabets"
|
|
>
|
|
<Input placeholder="unavailable choice" id="error" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Warning" validateStatus="warning">
|
|
<Input placeholder="Warning" id="warning" prefix={<SmileOutlined />} />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label="Validating"
|
|
hasFeedback
|
|
validateStatus="validating"
|
|
help="The information is being validated..."
|
|
>
|
|
<Input placeholder="I'm the content is being validated" id="validating" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Success" hasFeedback validateStatus="success">
|
|
<Input placeholder="I'm the content" id="success" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Warning" hasFeedback validateStatus="warning">
|
|
<Input placeholder="Warning" id="warning2" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label="Fail"
|
|
hasFeedback
|
|
validateStatus="error"
|
|
help="Should be combination of numbers & alphabets"
|
|
>
|
|
<Input placeholder="unavailable choice" id="error2" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Success" hasFeedback validateStatus="success">
|
|
<DatePicker style={{ width: '100%' }} />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Warning" hasFeedback validateStatus="warning">
|
|
<TimePicker style={{ width: '100%' }} />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Error" hasFeedback validateStatus="error">
|
|
<DatePicker.RangePicker style={{ width: '100%' }} />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Error" hasFeedback validateStatus="error">
|
|
<Select placeholder="I'm Select" allowClear>
|
|
<Option value="1">Option 1</Option>
|
|
<Option value="2">Option 2</Option>
|
|
<Option value="3">Option 3</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label="Validating"
|
|
hasFeedback
|
|
validateStatus="error"
|
|
help="Something breaks the rule."
|
|
>
|
|
<Cascader placeholder="I'm Cascader" options={[{ value: 'xx', label: 'xx' }]} allowClear />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Warning" hasFeedback validateStatus="warning" help="Need to be checked">
|
|
<TreeSelect
|
|
placeholder="I'm TreeSelect"
|
|
treeData={[{ value: 'xx', label: 'xx' }]}
|
|
allowClear
|
|
/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="inline" style={{ marginBottom: 0 }}>
|
|
<Form.Item
|
|
validateStatus="error"
|
|
help="Please select right date"
|
|
style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
|
|
>
|
|
<DatePicker />
|
|
</Form.Item>
|
|
<span
|
|
style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
|
|
>
|
|
-
|
|
</span>
|
|
<Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
|
|
<DatePicker />
|
|
</Form.Item>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Success" hasFeedback validateStatus="success">
|
|
<InputNumber style={{ width: '100%' }} />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Success" hasFeedback validateStatus="success">
|
|
<Input allowClear placeholder="with allowClear" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Warning" hasFeedback validateStatus="warning">
|
|
<Input.Password placeholder="with input password" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Error" hasFeedback validateStatus="error">
|
|
<Input.Password allowClear placeholder="with input password and allowClear" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Fail" validateStatus="error" hasFeedback>
|
|
<Mentions />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="Fail" validateStatus="error" hasFeedback help="Should have something">
|
|
<Input.TextArea allowClear showCount />
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
|
|
export default App;
|