Browse Source
* feat: less variables to component token for List * Update migrate-less-variables.en-US.md * feat: recover less variables * feat: add debug demo * chore: update snapshot * chore: rename * chore: rename && fix ts && recover itemPaddingLG --------- Co-authored-by: zhangjianxiong <zhangjx@tsintergy.com> Co-authored-by: MadCcc <1075746765@qq.com>pull/42518/head
Zack Chang
2 years ago
committed by
GitHub
GitHub
9 changed files with 1518 additions and 26 deletions
@ -0,0 +1,7 @@ |
|||
## zh-CN |
|||
|
|||
自定义组件 Token。 |
|||
|
|||
## en-US |
|||
|
|||
Custom component token. |
|||
@ -0,0 +1,113 @@ |
|||
import { Avatar, ConfigProvider, Divider, List, Typography } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
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://xsgames.co/randomusers/avatar.php?g=pixel&key=${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://xsgames.co/randomusers/avatar.php?g=pixel&key=${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; |
|||
Loading…
Reference in new issue