mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 13:18:04 +08:00
110 lines
2.9 KiB
TypeScript
110 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { Avatar, ConfigProvider, Divider, List, Typography } 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.',
|
|
];
|
|
|
|
const data1 = [
|
|
{
|
|
title: 'Ant Design Title 1',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 2',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 3',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 4',
|
|
},
|
|
];
|
|
|
|
const App: React.FC = () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
List: {
|
|
headerBg: 'pink',
|
|
footerBg: 'pink',
|
|
emptyTextPadding: 32,
|
|
itemPadding: '26px',
|
|
itemPaddingSM: '16px',
|
|
itemPaddingLG: '36px',
|
|
metaMarginBottom: 20,
|
|
avatarMarginRight: 20,
|
|
titleMarginBottom: 10,
|
|
descriptionFontSize: 20,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Divider orientation="left">Default Size</Divider>
|
|
<List
|
|
header={<div>Header</div>}
|
|
footer={<div>Footer</div>}
|
|
bordered
|
|
dataSource={data}
|
|
renderItem={(item) => (
|
|
<List.Item>
|
|
<Typography.Text mark>[ITEM]</Typography.Text> {item}
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
<Divider orientation="left">Small Size</Divider>
|
|
<List
|
|
size="small"
|
|
header={<div>Header</div>}
|
|
footer={<div>Footer</div>}
|
|
bordered
|
|
dataSource={data}
|
|
renderItem={(item) => <List.Item>{item}</List.Item>}
|
|
/>
|
|
<Divider orientation="left">Large Size</Divider>
|
|
<List
|
|
size="large"
|
|
header={<div>Header</div>}
|
|
footer={<div>Footer</div>}
|
|
bordered
|
|
dataSource={data}
|
|
renderItem={(item) => <List.Item>{item}</List.Item>}
|
|
/>
|
|
<Divider orientation="left">Meta</Divider>
|
|
<List
|
|
itemLayout="horizontal"
|
|
dataSource={data1}
|
|
renderItem={(item, index) => (
|
|
<List.Item>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
|
|
title={<a href="https://ant.design">{item.title}</a>}
|
|
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
<Divider orientation="left">Vertical</Divider>
|
|
<List
|
|
itemLayout="vertical"
|
|
dataSource={data1}
|
|
renderItem={(item, index) => (
|
|
<List.Item>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
|
|
title={<a href="https://ant.design">{item.title}</a>}
|
|
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
<Divider orientation="left">Empty Text</Divider>
|
|
<List />
|
|
</ConfigProvider>
|
|
);
|
|
|
|
export default App;
|