![](/img/trans.png)
[英]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.