如何解决我怎样才能把它变成一个工作旋转木马?旋转木马弹出但两个箭头不活动
我怎样才能把它变成一个工作轮播,在同一个轮播旋转中显示 3 张或更多张牌? 这是我放在一起的示例代码,但无法在不同的旋转中显示更多的卡片。 我的目标是能够在旋转木马的每个弹簧(总共四次旋转)上显示多张卡片。
import React,{ Component } from "react";
import {
Card,CardHeader,CardBody,CardFooter,Box,Image,Grid,heading,Carousel,grommet
} from "grommet";
export class Events extends Component {
render() {
const customTheme = {
carousel: { row: { count: 1 },column: { count: 3 } }
};
return (
<Box fill="vertical">
<Box align="center">
<heading textAlign="center">Upcoming Events</heading>
<grommet theme={customTheme}>
<Carousel>
<Grid
columns={{ count: 3,size: "auto" }}
rows={{ count: 1,size: "medium" }}
gap="medium"
pad="small"
>
<Box
pad="medium"
align="center"
background={{ color: "white",opacity: "strong" }}
round
gap="small"
fill="vertical"
>
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />
</Box>{" "}
</CardHeader>
<CardBody pad="small">
The Stranahan High School Graduation
</CardBody>{" "}
<CardFooter>Footer</CardFooter>{" "}
</Card>{" "}
</Box>
<Box
pad="medium"
align="center"
background={{ color: "white",opacity: "strong" }}
round
gap="small"
fill="vertical"
>
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
{" "}
<Box height="small" width="small">
{" "}
<Image src="./images/Photo.jpg" />{" "}
</Box>{" "}
</CardHeader>{" "}
<CardBody pad="small">
The Stranahan High School Graduation
</CardBody>
<CardFooter>Footer</CardFooter>{" "}
</Card>{" "}
</Box>
<Box
pad="medium"
align="center"
background={{ color: "white",opacity: "strong" }}
round
gap="small"
fill="vertical"
>
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
{" "}
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />{" "}
</Box>
</CardHeader>
<CardBody pad="small">
The Stranahan High School Graduation
</CardBody>
<CardFooter>Footer</CardFooter>{" "}
</Card>{" "}
</Box>
<Box
class="Cards"
flex={false}
direction="row"
justify="between"
pad={{ left: "small",right: "small",top: "xsmall" }}
>
{" "}
</Box>{" "}
</Grid>{" "}
</Carousel>{" "}
</grommet>{" "}
</Box>{" "}
</Box>
);
}
}
export default Events;
解决方法
我已经为您修复了示例,每个 Carousel 开关显示的卡片数量取决于您将放置在 Carousel 子节点上的内容。我清理了一些冗余并将卡片分成可重复使用的组件,这些组件将用作子组件。此外,请注意使用 Carousel's docs 中提到的主题,我认为我们不需要此练习的主题,因此我已将其删除。
import React from "react";
import {
Card,CardHeader,CardBody,CardFooter,Box,Image,Heading,Carousel,Grommet
} from "grommet";
const Card0 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />
</Box>
</CardHeader>
<CardBody>Card0 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);
const Card1 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />
</Box>
</CardHeader>
<CardBody>Card1 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);
const Card2 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />{" "}
</Box>
</CardHeader>
<CardBody>Card2 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);
const Events = () => (
<Grommet>
<Heading textAlign="center">Upcoming Events</Heading>
<Carousel>
<Box direction="row" pad="large" round gap="small">
<Card0 />
<Card1 />
<Card2 />
</Box>
<Box direction="row" pad="large" background="brand" round gap="small">
<Card2 />
<Card1 />
<Card0 />
<Card2 />
</Box>
<Box direction="row" pad="large" background="accent-1" round gap="small">
<Card2 />
<Card1 />
<Card0 />
</Box>
<Box direction="row" pad="large" background="accent-2" round gap="small">
<Card2 />
<Card1 />
<Card0 />
<Card2 />
</Box>
</Carousel>
</Grommet>
);
export default Events;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。