[英]antd - ant design table with pagination control supporting a widget to choose rows per page?
[英]Pagination and Card Components with Ant Design (antd)?
是否可以将antd的 Pagination 组件与 Card 组件结合起来,得到一个类似于 Pinterest 的分页页面?
来自https://ant.design/components/pagination/的基本分页代码:
import { Pagination } from 'antd';
ReactDOM.render(<Pagination defaultCurrent={1} total={50} />, mountNode);
来自https://ant.design/components/card/的基本卡代码:
import { Card } from 'antd';
ReactDOM.render(
<Card
title="Card title"
extra={<a href="#">More</a>}
style={{ width: 300 }}
>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>,
mountNode
);
如何将这些组合起来循环浏览许多类似于图像中示例的卡片? 例如,某些页数有 9 张卡片。
这可以通过设置最小值和最大值并相应地显示结果来完成。
const numEachPage = 4 // Use a constant here to keep track of number of cards per page
constructor(props) {
super(props);
this.state = {
minValue: 0,
maxValue: 1
};
}
然后使用Array.slice()根据这些值显示数据,如下所示:
render() {
let data = [
{ title: "Card title1", value: "Card content1" },
{ title: "Card title2", value: "Card content2" },
{ title: "Card title3", value: "Card content3" },
{ title: "Card title4", value: "Card content4" },
{ title: "Card title5", value: "Card content5" }
];
return (
<div>
{data &&
data.length > 0 &&
data.slice(this.state.minValue, this.state.maxValue).map(val => (
<Card
title={val.title}
extra={<a href="#">More</a>}
style={{ width: 300 }}
>
<p>{val.value}</p>
</Card>
))}
<Pagination
defaultCurrent={1}
defaultPageSize={numEachPage} //default size of page
onChange={this.handleChange}
total={3} //total number of card data available
/>
</div>
);
}
然后你可以在handleChange
方法中编写你的逻辑。
handleChange = value => {
this.setState({
minValue: (value - 1) * numEachPage,
maxValue: value * numEachPage
});
};
我创建了一个工作演示。
这是我在项目中使用的工作代码:
<List
grid={{
gutter: 16,
xs: 1,
sm: 2,
md: 3,
lg: 4,
xl: 5,
xxl: 6
}}
pagination={{
showSizeChanger: true,
pageSizeOptions: ["10", "50", "100", "1000"],
position: "both"
}}
dataSource={dataSource}
renderItem={data => (
<List.Item>
<Card
bordered={false}
key={key}
title={"CARD TITLE"}
cover={
<img
alt={"ALT"}
src={url}
/>
}
>
{"BODY"}
</Card>
</List.Item>
/>
你真正想要的是一个带有pagination
属性和renderItem
渲染属性的List
组件。 Ant Design 在其文档中有一个演示:
他们的代码如下; 您所要做的就是将您的数据传递给dataSource
道具并让renderItem
返回一个Card
!
import { List, Avatar, Icon } from 'antd';
const listData = [];
for (let i = 0; i < 23; i++) {
listData.push({
href: 'http://ant.design',
title: `ant design part ${i}`,
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
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 = ({ type, text }) => (
<span>
<Icon type={type} style={{ marginRight: 8 }} />
{text}
</span>
);
ReactDOM.render(
<List
itemLayout="vertical"
size="large"
pagination={{
onChange: page => {
console.log(page);
},
pageSize: 3,
}}
dataSource={listData}
footer={
<div>
<b>ant design</b> footer part
</div>
}
renderItem={item => (
<List.Item
key={item.title}
actions={[
<IconText type="star-o" text="156" key="list-vertical-star-o" />,
<IconText type="like-o" text="156" key="list-vertical-like-o" />,
<IconText type="message" 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>
)}
/>,
mountNode,
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.