Javascript 使用Ant Design(antd)的分页和卡组件?
是否可以将中的分页组件与卡组件组合,以获得类似于Pinterest的分页页面 基本分页代码来自:Javascript 使用Ant Design(antd)的分页和卡组件?,javascript,reactjs,pinterest,antd,Javascript,Reactjs,Pinterest,Antd,是否可以将中的分页组件与卡组件组合,以获得类似于Pinterest的分页页面 基本分页代码来自: 从“antd”导入{Pagination}; render(,mountNode); 基本卡代码来自: 从“antd”导入{Card}; ReactDOM.render( 卡片内容 卡片内容 卡片内容 , mountNode ); 如何将这些组合起来,在许多类似于图中示例的卡片之间循环?例如,一些页面上有9张卡片 这可以通过设置最小值和最大值并相应地显示结果来实现 const numEachPa
从“antd”导入{Pagination};
render(,mountNode);
基本卡代码来自:
从“antd”导入{Card};
ReactDOM.render(
卡片内容
卡片内容
卡片内容
,
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
};
}
然后根据这些值显示数据,如下所示:
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>
);
}
我已经创建了一个。这里您实际需要的是一个带有分页
属性和渲染属性的列表
组件。Ant Design具有以下功能:
他们的代码如下;您所要做的就是将数据传递到数据源
道具,并让renderItem
返回卡
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,
);
从“antd”导入{List,Avatar,Icon};
常量listData=[];
for(设i=0;i<23;i++){
listData.push({
href:'http://ant.design',
标题:`ant设计部分${i}`,
阿凡达:'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
说明:
“Ant Design是一种用于后台应用程序的设计语言,由Ant团队改进。”,
内容:
“我们提供一系列设计原则、实用模式和高质量的设计资源(草图和Axure),帮助人们美丽高效地创建产品原型。”,
});
}
常量IconText=({type,text})=>(
{text}
);
ReactDOM.render(
{
控制台日志(第页);
},
页面大小:3,
}}
数据源={listData}
页脚={
ant设计页脚部分
}
renderItem={item=>(
{item.content}
)}
/>,
mountNode,
);
以下是我在项目中使用的工作代码:
<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={fabric => (
<List.Item>
<Card
bordered={false}
key={key}
title={"CARD TITLE}
cover={
<img
alt={"ALT"}
src={url}
/>
}
>
{"BODY"}
</Card>
</List.Item>
(
这里需要的结果是什么?带有分页的卡片网格?添加了一个示例图像
handleChange = value => {
this.setState({
minValue: (value - 1) * numEachPage,
maxValue: value * numEachPage
});
};
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,
);
<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={fabric => (
<List.Item>
<Card
bordered={false}
key={key}
title={"CARD TITLE}
cover={
<img
alt={"ALT"}
src={url}
/>
}
>
{"BODY"}
</Card>
</List.Item>