mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
108 lines
2.4 KiB
Markdown
108 lines
2.4 KiB
Markdown
---
|
|
order: 99
|
|
title:
|
|
zh-CN: 文本对齐
|
|
en-US: Text Align
|
|
debug: true
|
|
---
|
|
|
|
```tsx
|
|
import React from 'react';
|
|
import {
|
|
Typography,
|
|
Button,
|
|
Input,
|
|
Select,
|
|
Cascader,
|
|
TreeSelect,
|
|
DatePicker,
|
|
TimePicker,
|
|
InputNumber,
|
|
Radio,
|
|
AutoComplete,
|
|
Mentions,
|
|
} from 'antd';
|
|
|
|
const { Text } = Typography;
|
|
const { Option } = Select;
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const narrowStyle = {
|
|
width: 50,
|
|
};
|
|
|
|
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',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const App: React.FC = () => (
|
|
<>
|
|
<Mentions style={{ width: 100 }} rows={1} />
|
|
<Input.TextArea rows={1} style={{ width: 100 }} />
|
|
<Button type="primary">Button</Button>
|
|
<Input style={{ width: 100 }} />
|
|
<Text copyable>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>
|
|
<TreeSelect style={{ width: 100 }} />
|
|
<Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} />
|
|
<RangePicker />
|
|
<DatePicker picker="month" />
|
|
<Radio.Group defaultValue="a">
|
|
<Radio.Button value="a">Hangzhou</Radio.Button>
|
|
<Radio.Button value="b">Shanghai</Radio.Button>
|
|
</Radio.Group>
|
|
<AutoComplete style={{ width: 100 }} placeholder="input here" />
|
|
<br />
|
|
<Input prefix="$" addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
|
|
<Input style={narrowStyle} suffix="Y" />
|
|
<Input style={narrowStyle} />
|
|
<Input style={narrowStyle} defaultValue="1" suffix="Y" />
|
|
</>
|
|
);
|
|
|
|
export default App;
|
|
```
|