You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.2 KiB
100 lines
2.2 KiB
5 years ago
|
---
|
||
|
|
order: 99
|
||
|
|
title:
|
||
|
|
zh-CN: 文本对齐
|
||
|
|
en-US: Text Align
|
||
|
|
debug: true
|
||
|
|
---
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import {
|
||
|
|
Typography,
|
||
|
|
Button,
|
||
|
|
Input,
|
||
|
|
Select,
|
||
|
|
Cascader,
|
||
|
|
TreeSelect,
|
||
|
|
DatePicker,
|
||
|
|
TimePicker,
|
||
|
|
InputNumber,
|
||
|
|
Radio,
|
||
|
|
AutoComplete,
|
||
|
|
Mentions,
|
||
|
|
} from 'antd';
|
||
|
|
|
||
|
|
const { Text } = Typography;
|
||
|
|
const RadioButton = Radio.Button;
|
||
|
|
const RadioGroup = Radio.Group;
|
||
|
|
const Option = Select.Option;
|
||
|
|
const { MonthPicker, RangePicker } = DatePicker;
|
||
|
|
|
||
|
|
const options = [
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'xihu',
|
||
|
|
label: 'West Lake',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'jiangsu',
|
||
|
|
label: 'Jiangsu',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'nanjing',
|
||
|
|
label: 'Nanjing',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'zhonghuamen',
|
||
|
|
label: 'Zhong Hua Men',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
ReactDOM.render(
|
||
|
|
<div>
|
||
|
|
<Mentions style={{ width: 100 }} rows={1} />
|
||
|
|
<Input.TextArea rows={1} style={{ width: 100 }} />
|
||
|
|
<Button type="primary">Button</Button>
|
||
|
|
<Input style={{ width: 100 }} />
|
||
|
|
<Text copiable>Ant Design</Text>
|
||
|
|
<Input prefix="1" suffix="2" style={{ width: 100 }} />
|
||
|
|
<Input addonBefore="1" addonAfter="2" style={{ width: 100 }} />
|
||
|
|
<InputNumber style={{ width: 100 }} />
|
||
|
|
<DatePicker style={{ width: 100 }} />
|
||
|
|
<TimePicker style={{ width: 100 }} />
|
||
|
|
<Select style={{ width: 100 }} defaultValue="jack">
|
||
|
|
<Option value="jack">Jack</Option>
|
||
|
|
<Option value="lucy">Lucy</Option>
|
||
|
|
<Option value="disabled" disabled>
|
||
|
|
Disabled
|
||
|
|
</Option>
|
||
|
|
<Option value="Yiminghe">yiminghe</Option>
|
||
|
|
</Select>
|
||
|
|
<Select style={{ width: 100 }} combobox defaultValue="jack" />
|
||
|
|
<TreeSelect style={{ width: 100 }} />
|
||
|
|
<Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} />
|
||
|
|
<RangePicker />
|
||
|
|
<MonthPicker />
|
||
|
|
<RadioGroup defaultValue="a">
|
||
|
|
<RadioButton value="a">Hangzhou</RadioButton>
|
||
|
|
<RadioButton value="b">Shanghai</RadioButton>
|
||
|
|
</RadioGroup>
|
||
|
|
<AutoComplete style={{ width: 100 }} placeholder="input here" />
|
||
|
|
</div>,
|
||
|
|
mountNode,
|
||
|
|
);
|
||
|
|
```
|