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.
672 lines
42 KiB
672 lines
42 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[8059],{438966:function(m,a,n){n.r(a);var p=n(502143),g=n(968521),_=n(720719),v=n(28840),Z=n(759907),i=n(828089),h=n(825673),f=n(902068),b=n(574399),L=n(863942),x=n(316073),D=n(24628),y=n(719260),k=n(956140),o=n(127179),s=n(905388),I=n(40428),T=n(606965),E=n(268696),A=n(587302),r=n(424128),P=n(249706),M=n(795127),w=n(116846),C=n(212039),S=n(73024),O=n(553913),l=n(606641),c=n(667294),t=n(370917);function d(){var u=(0,l.eL)(),e=u.texts;return(0,t.tZ)(l.dY,null,(0,t.tZ)(c.Fragment,null,(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("p",null,e[0].value),(0,t.tZ)("h2",{id:"when-to-use"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,t.tZ)("p",null,e[1].value),(0,t.tZ)("h2",{id:"examples"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,t.tZ)(s.Z,{items:[{demo:{id:"components-list-demo-simple"},previewerProps:{title:"Simple list",filename:"components/list/demo/simple.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { 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 App = () => (
|
|
<>
|
|
<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>}
|
|
/>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:`<p>Ant Design supports a default list size as well as a large and small size.</p>
|
|
<p>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.</p>
|
|
<p>Customizing the header and footer of list by setting <code>header</code> and <code>footer</code> property.</p>`}},{demo:{id:"components-list-demo-basic"},previewerProps:{title:"Basic list",filename:"components/list/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Avatar, List } from 'antd';
|
|
import React from 'react';
|
|
const data = [
|
|
{
|
|
title: 'Ant Design Title 1',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 2',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 3',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 4',
|
|
},
|
|
];
|
|
const App = () => (
|
|
<List
|
|
itemLayout="horizontal"
|
|
dataSource={data}
|
|
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>
|
|
)}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Basic list.</p>"}},{demo:{id:"components-list-demo-loadmore"},previewerProps:{title:"Load more",filename:"components/list/demo/loadmore.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useEffect, useState } from 'react';
|
|
import { Avatar, Button, List, Skeleton } from 'antd';
|
|
const count = 3;
|
|
const fakeDataUrl = \`https://randomuser.me/api/?results=\${count}&inc=name,gender,email,nat,picture&noinfo\`;
|
|
const App = () => {
|
|
const [initLoading, setInitLoading] = useState(true);
|
|
const [loading, setLoading] = useState(false);
|
|
const [data, setData] = useState([]);
|
|
const [list, setList] = useState([]);
|
|
useEffect(() => {
|
|
fetch(fakeDataUrl)
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
setInitLoading(false);
|
|
setData(res.results);
|
|
setList(res.results);
|
|
});
|
|
}, []);
|
|
const onLoadMore = () => {
|
|
setLoading(true);
|
|
setList(
|
|
data.concat(
|
|
[...new Array(count)].map(() => ({
|
|
loading: true,
|
|
name: {},
|
|
picture: {},
|
|
})),
|
|
),
|
|
);
|
|
fetch(fakeDataUrl)
|
|
.then((res) => res.json())
|
|
.then((res) => {
|
|
const newData = data.concat(res.results);
|
|
setData(newData);
|
|
setList(newData);
|
|
setLoading(false);
|
|
// Resetting window's offsetTop so as to display react-virtualized demo underfloor.
|
|
// In real scene, you can using public method of react-virtualized:
|
|
// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
|
|
window.dispatchEvent(new Event('resize'));
|
|
});
|
|
};
|
|
const loadMore =
|
|
!initLoading && !loading ? (
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
marginTop: 12,
|
|
height: 32,
|
|
lineHeight: '32px',
|
|
}}
|
|
>
|
|
<Button onClick={onLoadMore}>loading more</Button>
|
|
</div>
|
|
) : null;
|
|
return (
|
|
<List
|
|
className="demo-loadmore-list"
|
|
loading={initLoading}
|
|
itemLayout="horizontal"
|
|
loadMore={loadMore}
|
|
dataSource={list}
|
|
renderItem={(item) => (
|
|
<List.Item
|
|
actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
|
|
>
|
|
<Skeleton avatar title={false} loading={item.loading} active>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={item.picture.large} />}
|
|
title={<a href="https://ant.design">{item.name?.last}</a>}
|
|
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
|
/>
|
|
<div>content</div>
|
|
</Skeleton>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>Load more list with <code>loadMore</code> property.</p>",style:`.demo-loadmore-list {
|
|
min-height: 350px;
|
|
}`}},{demo:{id:"components-list-demo-vertical"},previewerProps:{title:"Vertical",filename:"components/list/demo/vertical.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
|
|
import { Avatar, List, Space } from 'antd';
|
|
import React from 'react';
|
|
const data = Array.from({
|
|
length: 23,
|
|
}).map((_, i) => ({
|
|
href: 'https://ant.design',
|
|
title: \`ant design part \${i}\`,
|
|
avatar: \`https://xsgames.co/randomusers/avatar.php?g=pixel&key=\${i}\`,
|
|
description:
|
|
'Ant Design, a design language for background applications, is refined by Ant UED Team.',
|
|
content:
|
|
'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
|
|
}));
|
|
const IconText = ({ icon, text }) => (
|
|
<Space>
|
|
{React.createElement(icon)}
|
|
{text}
|
|
</Space>
|
|
);
|
|
const App = () => (
|
|
<List
|
|
itemLayout="vertical"
|
|
size="large"
|
|
pagination={{
|
|
onChange: (page) => {
|
|
console.log(page);
|
|
},
|
|
pageSize: 3,
|
|
}}
|
|
dataSource={data}
|
|
footer={
|
|
<div>
|
|
<b>ant design</b> footer part
|
|
</div>
|
|
}
|
|
renderItem={(item) => (
|
|
<List.Item
|
|
key={item.title}
|
|
actions={[
|
|
<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
|
|
<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
|
|
<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
|
|
]}
|
|
extra={
|
|
<img
|
|
width={272}
|
|
alt="logo"
|
|
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
|
|
/>
|
|
}
|
|
>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={item.avatar} />}
|
|
title={<a href={item.href}>{item.title}</a>}
|
|
description={item.description}
|
|
/>
|
|
{item.content}
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Set the <code>itemLayout</code> property to <code>vertical</code> to create a vertical list.</p>"}},{demo:{id:"components-list-demo-pagination"},previewerProps:{title:"Pagination Settings",filename:"components/list/demo/pagination.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Avatar, List, Radio, Space } from 'antd';
|
|
import React, { useState } from 'react';
|
|
const data = [
|
|
{
|
|
title: 'Ant Design Title 1',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 2',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 3',
|
|
},
|
|
{
|
|
title: 'Ant Design Title 4',
|
|
},
|
|
];
|
|
const positionOptions = ['top', 'bottom', 'both'];
|
|
const alignOptions = ['start', 'center', 'end'];
|
|
const App = () => {
|
|
const [position, setPosition] = useState('bottom');
|
|
const [align, setAlign] = useState('center');
|
|
return (
|
|
<>
|
|
<Space
|
|
direction="vertical"
|
|
style={{
|
|
marginBottom: '20px',
|
|
}}
|
|
size="middle"
|
|
>
|
|
<Space>
|
|
<span>Pagination Position:</span>
|
|
<Radio.Group
|
|
optionType="button"
|
|
value={position}
|
|
onChange={(e) => {
|
|
setPosition(e.target.value);
|
|
}}
|
|
>
|
|
{positionOptions.map((item) => (
|
|
<Radio.Button key={item} value={item}>
|
|
{item}
|
|
</Radio.Button>
|
|
))}
|
|
</Radio.Group>
|
|
</Space>
|
|
<Space>
|
|
<span>Pagination Align:</span>
|
|
<Radio.Group
|
|
optionType="button"
|
|
value={align}
|
|
onChange={(e) => {
|
|
setAlign(e.target.value);
|
|
}}
|
|
>
|
|
{alignOptions.map((item) => (
|
|
<Radio.Button key={item} value={item}>
|
|
{item}
|
|
</Radio.Button>
|
|
))}
|
|
</Radio.Group>
|
|
</Space>
|
|
</Space>
|
|
<List
|
|
pagination={{
|
|
position,
|
|
align,
|
|
}}
|
|
dataSource={data}
|
|
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>
|
|
)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>List pagination can be used and set through the <code>pagination</code> property.</p>"}},{demo:{id:"components-list-demo-grid"},previewerProps:{title:"Grid",filename:"components/list/demo/grid.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Card, List } from 'antd';
|
|
const data = [
|
|
{
|
|
title: 'Title 1',
|
|
},
|
|
{
|
|
title: 'Title 2',
|
|
},
|
|
{
|
|
title: 'Title 3',
|
|
},
|
|
{
|
|
title: 'Title 4',
|
|
},
|
|
];
|
|
const App = () => (
|
|
<List
|
|
grid={{
|
|
gutter: 16,
|
|
column: 4,
|
|
}}
|
|
dataSource={data}
|
|
renderItem={(item) => (
|
|
<List.Item>
|
|
<Card title={item.title}>Card content</Card>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Create a grid layout by setting the <code>grid</code> property of List.</p>"}},{demo:{id:"components-list-demo-grid-test"},previewerProps:{debug:!0,title:"Test Grid",filename:"components/list/demo/grid-test.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Card, List } from 'antd';
|
|
const data = [
|
|
{
|
|
title: 'Title 1',
|
|
},
|
|
{
|
|
title: 'Title 2',
|
|
},
|
|
{
|
|
title: 'Title 3',
|
|
},
|
|
{
|
|
title: 'Title 4',
|
|
},
|
|
{
|
|
title: 'Title 5',
|
|
},
|
|
{
|
|
title: 'Title 6',
|
|
},
|
|
];
|
|
const ListItem = () => (
|
|
<List.Item>
|
|
<Card title="title">Card content</Card>
|
|
</List.Item>
|
|
);
|
|
const App = () => (
|
|
<>
|
|
<List
|
|
grid={{
|
|
gutter: 16,
|
|
column: 4,
|
|
}}
|
|
dataSource={data}
|
|
renderItem={(item) => (
|
|
<List.Item>
|
|
<Card title={item.title}>Card content</Card>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
<List
|
|
grid={{
|
|
gutter: 16,
|
|
column: 4,
|
|
}}
|
|
dataSource={data}
|
|
renderItem={() => <ListItem />}
|
|
/>
|
|
<List
|
|
grid={{
|
|
gutter: 16,
|
|
column: 4,
|
|
}}
|
|
dataSource={data}
|
|
renderItem={() => (
|
|
<>
|
|
<ListItem />
|
|
<div />
|
|
</>
|
|
)}
|
|
/>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Test List <code>grid</code> for some edge cases.</p>"}},{demo:{id:"components-list-demo-responsive"},previewerProps:{title:"Responsive grid list",filename:"components/list/demo/responsive.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Card, List } from 'antd';
|
|
const data = [
|
|
{
|
|
title: 'Title 1',
|
|
},
|
|
{
|
|
title: 'Title 2',
|
|
},
|
|
{
|
|
title: 'Title 3',
|
|
},
|
|
{
|
|
title: 'Title 4',
|
|
},
|
|
{
|
|
title: 'Title 5',
|
|
},
|
|
{
|
|
title: 'Title 6',
|
|
},
|
|
];
|
|
const App = () => (
|
|
<List
|
|
grid={{
|
|
gutter: 16,
|
|
xs: 1,
|
|
sm: 2,
|
|
md: 4,
|
|
lg: 4,
|
|
xl: 6,
|
|
xxl: 3,
|
|
}}
|
|
dataSource={data}
|
|
renderItem={(item) => (
|
|
<List.Item>
|
|
<Card title={item.title}>Card content</Card>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
);
|
|
export default App;
|
|
`,description:'<p>Responsive grid list. The size property the is as same as <a href="/components/grid/#col">Layout Grid</a>.</p>'}},{demo:{id:"components-list-demo-infinite-load"},previewerProps:{title:"Scrolling loaded",filename:"components/list/demo/infinite-load.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useEffect, useState } from 'react';
|
|
import { Avatar, Divider, List, Skeleton } from 'antd';
|
|
import InfiniteScroll from 'react-infinite-scroll-component';
|
|
const App = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [data, setData] = useState([]);
|
|
const loadMoreData = () => {
|
|
if (loading) {
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
|
|
.then((res) => res.json())
|
|
.then((body) => {
|
|
setData([...data, ...body.results]);
|
|
setLoading(false);
|
|
})
|
|
.catch(() => {
|
|
setLoading(false);
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
loadMoreData();
|
|
}, []);
|
|
return (
|
|
<div
|
|
id="scrollableDiv"
|
|
style={{
|
|
height: 400,
|
|
overflow: 'auto',
|
|
padding: '0 16px',
|
|
border: '1px solid rgba(140, 140, 140, 0.35)',
|
|
}}
|
|
>
|
|
<InfiniteScroll
|
|
dataLength={data.length}
|
|
next={loadMoreData}
|
|
hasMore={data.length < 50}
|
|
loader={
|
|
<Skeleton
|
|
avatar
|
|
paragraph={{
|
|
rows: 1,
|
|
}}
|
|
active
|
|
/>
|
|
}
|
|
endMessage={<Divider plain>It is all, nothing more \u{1F910}</Divider>}
|
|
scrollableTarget="scrollableDiv"
|
|
>
|
|
<List
|
|
dataSource={data}
|
|
renderItem={(item) => (
|
|
<List.Item key={item.email}>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={item.picture.large} />}
|
|
title={<a href="https://ant.design">{item.name.last}</a>}
|
|
description={item.email}
|
|
/>
|
|
<div>Content</div>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</InfiniteScroll>
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:'<p>The example of infinite load with <a href="https://github.com/ankeetmaini/react-infinite-scroll-component">react-infinite-scroll-component</a>.</p>'}},{demo:{id:"components-list-demo-virtual-list"},previewerProps:{title:"virtual list",filename:"components/list/demo/virtual-list.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useEffect, useState } from 'react';
|
|
import { Avatar, List, message } from 'antd';
|
|
import VirtualList from 'rc-virtual-list';
|
|
const fakeDataUrl =
|
|
'https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo';
|
|
const ContainerHeight = 400;
|
|
const App = () => {
|
|
const [data, setData] = useState([]);
|
|
const appendData = () => {
|
|
fetch(fakeDataUrl)
|
|
.then((res) => res.json())
|
|
.then((body) => {
|
|
setData(data.concat(body.results));
|
|
message.success(\`\${body.results.length} more items loaded!\`);
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
appendData();
|
|
}, []);
|
|
const onScroll = (e) => {
|
|
if (e.currentTarget.scrollHeight - e.currentTarget.scrollTop === ContainerHeight) {
|
|
appendData();
|
|
}
|
|
};
|
|
return (
|
|
<List>
|
|
<VirtualList
|
|
data={data}
|
|
height={ContainerHeight}
|
|
itemHeight={47}
|
|
itemKey="email"
|
|
onScroll={onScroll}
|
|
>
|
|
{(item) => (
|
|
<List.Item key={item.email}>
|
|
<List.Item.Meta
|
|
avatar={<Avatar src={item.picture.large} />}
|
|
title={<a href="https://ant.design">{item.name.last}</a>}
|
|
description={item.email}
|
|
/>
|
|
<div>Content</div>
|
|
</List.Item>
|
|
)}
|
|
</VirtualList>
|
|
</List>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:'<p>An example of infinite & virtualized list via using <a href="https://github.com/react-component/virtual-list">rc-virtual-list</a>.</p>'}},{demo:{id:"components-list-demo-component-token"},previewerProps:{debug:!0,title:"custom component token",filename:"components/list/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`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 = () => (
|
|
<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;
|
|
`,description:"<p>Custom component token.</p>"}}]}),(0,t.tZ)("div",{className:"markdown"},(0,t.tZ)("h2",{id:"api"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"API"),(0,t.tZ)("h3",{id:"list"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#list",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"List"),(0,t.tZ)(i.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[2].value),(0,t.tZ)("th",null,e[3].value),(0,t.tZ)("th",null,e[4].value),(0,t.tZ)("th",null,e[5].value),(0,t.tZ)("th",null,e[6].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[7].value),(0,t.tZ)("td",null,e[8].value),(0,t.tZ)("td",null,e[9].value),(0,t.tZ)("td",null,e[10].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[11].value),(0,t.tZ)("td",null,e[12].value),(0,t.tZ)("td",null,e[13].value),(0,t.tZ)("td",null,e[14].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[15].value),(0,t.tZ)("td",null,e[16].value),(0,t.tZ)("td",null,e[17].value),(0,t.tZ)("td",null,e[18].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[19].value),(0,t.tZ)("td",null,e[20].value),(0,t.tZ)("td",null,(0,t.tZ)(r.Z,{to:"#list-grid-props",sourceType:"Link"},e[21].value)),(0,t.tZ)("td",null,e[22].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[23].value),(0,t.tZ)("td",null,e[24].value),(0,t.tZ)("td",null,e[25].value),(0,t.tZ)("td",null,e[26].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[27].value),(0,t.tZ)("td",null,e[28].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[29].value),e[30].value,(0,t.tZ)("code",null,e[31].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[32].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[33].value),(0,t.tZ)("td",null,e[34].value),(0,t.tZ)("td",null,e[35].value,(0,t.tZ)(r.Z,{to:"/components/spin/#api",sourceType:"Link"},e[36].value),e[37].value,(0,t.tZ)(r.Z,{href:"https://github.com/ant-design/ant-design/issues/8659",sourceType:"a"},e[38].value),e[39].value),(0,t.tZ)("td",null,e[40].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[41].value),(0,t.tZ)("td",null,e[42].value),(0,t.tZ)("td",null,e[43].value),(0,t.tZ)("td",null,e[44].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[45].value),(0,t.tZ)("td",null,e[46].value),(0,t.tZ)("td",null,e[47].value),(0,t.tZ)("td",null,e[48].value,(0,t.tZ)("code",null,e[49].value),e[50].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[51].value),(0,t.tZ)("td",null,e[52].value,(0,t.tZ)(r.Z,{to:"/components/pagination/",sourceType:"Link"},e[53].value),e[54].value),(0,t.tZ)("td",null,e[55].value),(0,t.tZ)("td",null,e[56].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[57].value),(0,t.tZ)("td",null,e[58].value,(0,t.tZ)("code",null,e[59].value)),(0,t.tZ)("td",null,e[60].value),(0,t.tZ)("td",null,e[61].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[62].value),(0,t.tZ)("td",null,e[63].value,(0,t.tZ)("code",null,e[64].value),e[65].value,(0,t.tZ)("code",null,e[66].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[67].value),e[68].value,(0,t.tZ)("code",null,e[69].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[70].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[71].value),(0,t.tZ)("td",null,e[72].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[73].value),e[74].value,(0,t.tZ)("code",null,e[75].value),e[76].value,(0,t.tZ)("code",null,e[77].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[78].value)),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[79].value),(0,t.tZ)("td",null,e[80].value),(0,t.tZ)("td",null,e[81].value),(0,t.tZ)("td",null,e[82].value),(0,t.tZ)("td",null)))),(0,t.tZ)("h3",{id:"pagination"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#pagination",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"pagination"),(0,t.tZ)("p",null,e[83].value),(0,t.tZ)(i.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[84].value),(0,t.tZ)("th",null,e[85].value),(0,t.tZ)("th",null,e[86].value),(0,t.tZ)("th",null,e[87].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[88].value),(0,t.tZ)("td",null,e[89].value,(0,t.tZ)("code",null,e[90].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[91].value),e[92].value,(0,t.tZ)("code",null,e[93].value),e[94].value,(0,t.tZ)("code",null,e[95].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[96].value))),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[97].value),(0,t.tZ)("td",null,e[98].value,(0,t.tZ)("code",null,e[99].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[100].value),e[101].value,(0,t.tZ)("code",null,e[102].value),e[103].value,(0,t.tZ)("code",null,e[104].value)),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[105].value))))),(0,t.tZ)("p",null,e[106].value,(0,t.tZ)(r.Z,{to:"/components/pagination/",sourceType:"Link"},(0,t.tZ)("code",null,e[107].value)),e[108].value),(0,t.tZ)("h3",{id:"list-grid-props"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#list-grid-props",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"List grid props"),(0,t.tZ)(i.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[109].value),(0,t.tZ)("th",null,e[110].value),(0,t.tZ)("th",null,e[111].value),(0,t.tZ)("th",null,e[112].value),(0,t.tZ)("th",null,e[113].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[114].value),(0,t.tZ)("td",null,e[115].value),(0,t.tZ)("td",null,e[116].value),(0,t.tZ)("td",null,e[117].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[118].value),(0,t.tZ)("td",null,e[119].value),(0,t.tZ)("td",null,e[120].value),(0,t.tZ)("td",null,e[121].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[122].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[123].value),e[124].value),(0,t.tZ)("td",null,e[125].value),(0,t.tZ)("td",null,e[126].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[127].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[128].value),e[129].value),(0,t.tZ)("td",null,e[130].value),(0,t.tZ)("td",null,e[131].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[132].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[133].value),e[134].value),(0,t.tZ)("td",null,e[135].value),(0,t.tZ)("td",null,e[136].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[137].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[138].value),e[139].value),(0,t.tZ)("td",null,e[140].value),(0,t.tZ)("td",null,e[141].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[142].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[143].value),e[144].value),(0,t.tZ)("td",null,e[145].value),(0,t.tZ)("td",null,e[146].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[147].value),(0,t.tZ)("td",null,(0,t.tZ)("code",null,e[148].value),e[149].value),(0,t.tZ)("td",null,e[150].value),(0,t.tZ)("td",null,e[151].value),(0,t.tZ)("td",null)))),(0,t.tZ)("h3",{id:"listitem"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#listitem",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"List.Item"),(0,t.tZ)(i.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[152].value),(0,t.tZ)("th",null,e[153].value),(0,t.tZ)("th",null,e[154].value),(0,t.tZ)("th",null,e[155].value),(0,t.tZ)("th",null,e[156].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[157].value),(0,t.tZ)("td",null,e[158].value,(0,t.tZ)("code",null,e[159].value),e[160].value,(0,t.tZ)("code",null,e[161].value),e[162].value),(0,t.tZ)("td",null,e[163].value),(0,t.tZ)("td",null,e[164].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[165].value),(0,t.tZ)("td",null,e[166].value,(0,t.tZ)("code",null,e[167].value),e[168].value,(0,t.tZ)("code",null,e[169].value),e[170].value),(0,t.tZ)("td",null,e[171].value),(0,t.tZ)("td",null,e[172].value),(0,t.tZ)("td",null)))),(0,t.tZ)("h3",{id:"listitemmeta"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#listitemmeta",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"List.Item.Meta"),(0,t.tZ)(i.Z,{className:"component-api-table"},(0,t.tZ)("thead",null,(0,t.tZ)("tr",null,(0,t.tZ)("th",null,e[173].value),(0,t.tZ)("th",null,e[174].value),(0,t.tZ)("th",null,e[175].value),(0,t.tZ)("th",null,e[176].value),(0,t.tZ)("th",null,e[177].value))),(0,t.tZ)("tbody",null,(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[178].value),(0,t.tZ)("td",null,e[179].value),(0,t.tZ)("td",null,e[180].value),(0,t.tZ)("td",null,e[181].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[182].value),(0,t.tZ)("td",null,e[183].value),(0,t.tZ)("td",null,e[184].value),(0,t.tZ)("td",null,e[185].value),(0,t.tZ)("td",null)),(0,t.tZ)("tr",null,(0,t.tZ)("td",null,e[186].value),(0,t.tZ)("td",null,e[187].value),(0,t.tZ)("td",null,e[188].value),(0,t.tZ)("td",null,e[189].value),(0,t.tZ)("td",null)))),(0,t.tZ)("h2",{id:"design-token"},(0,t.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,t.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,t.tZ)(o.Z,{component:"List"})))}a.default=d}}]);
|
|
|