mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
1.7 KiB
1.7 KiB
order | title | ||||
---|---|---|---|---|---|
0 |
|
zh-CN
列表拥有大、中、小三种尺寸。
通过设置 size
为 large
small
分别把按钮设为大、小尺寸。若不设置 size
,则尺寸为中。
可通过设置 header
和 footer
,来自定义列表头部和尾部。
en-US
Ant Design supports a default list size as well as a large and small size.
If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.
Customizing the header and footer of list by setting header
and footer
property.
import { List } from 'antd';
const data = [
'Racing car sprays burning fuel into crowd.',
'Japanese princess to wed commoner.',
'Australian walks 100km after outback crash.',
'Man charged over missing wedding girl.',
'Los Angeles battles huge wildfires.',
];
ReactDOM.render(
<div>
<h3 style={{ marginBottom: 16 }}>Default Size</h3>
<List
header={<div>Header</div>}
footer={<div>Footer</div>}
bordered
dataSource={data}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
<h3 style={{ margin: '16px 0' }}>Small Size</h3>
<List
size="small"
header={<div>Header</div>}
footer={<div>Footer</div>}
bordered
dataSource={data}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
<h3 style={{ margin: '16px 0' }}>Large Size</h3>
<List
size="large"
header={<div>Header</div>}
footer={<div>Footer</div>}
bordered
dataSource={data}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</div>,
mountNode
);