我试图在我的项目上实现一个垂直的时间轴。但它没有显示在生成的HTML代码上。当我试图检查它时,我看到类被生成为隐藏“is-hidden”。我认为它可能与相交观察器有问题。
时间轴.js文件
"use client";
import React from "react";
import SectionHeading from "./section-heading";
import {
VerticalTimeline,
VerticalTimelineElement,
} from "react-vertical-timeline-component";
import "react-vertical-timeline-component/style.min.css";
import { timelineData } from "@/lib/data";
import { useSectionInView } from "@/lib/hooks";
export default function Experience() {
const { ref } = useSectionInView("Timeline");
return (
<section
id="timeline"
ref={ref}
className="scroll-mt-28 mb-28 sm:mb-40 text-center"
>
<SectionHeading>Timeline</SectionHeading>
<VerticalTimeline lineColor="">
{timelineData.map((item, index) => (
<React.Fragment key={index}>
<VerticalTimelineElement
contentStyle={{
background: "rgba(255, 0, 255, 0.05)",
boxShadow: "none",
border: "1px solid rgba(0, 230, 0, 0.05)",
textAlign: "left",
padding: "1.3rem 2rem",
}}
contentArrowStyle={{
borderRight: "0.4rem solid rgba(255, 255, 255, 0.5)",
}}
date={item.date}
icon={item.icon}
iconStyle={{
background: "rgba(255, 255, 255, 0.15)",
fontSize: "1.5rem",
}}
>
<h3 className="font-semibold capitalize">{item.title}</h3>
<p className="font-normal !mt-0">{item.location}</p>
<p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">
{item.description}
</p>
</VerticalTimelineElement>
</React.Fragment>
))}
</VerticalTimeline>
</section>
);
}
字符串
data.js文件
{
index_number: 1,
title: "Bachelor's Degree",
location: "Bangladesh",
description:
"I completed my Bachelor's Degree in Computer Science and Software Engineering at the American International University-Bangladesh.",
tags: ["CSSE", "Bachelors", "Graduation"],
date: "2-September-1994",
icon: <BiSolidGraduation />,
},
{
index_number: 1,
title: "Bachelor's Degree",
location: "Bangladesh",
description:
"I completed my Bachelor's Degree in Computer Science and Softwarelre asjdajs.",
tags: ["CSSE", "Bachelors", "Graduation"],
date: "11-September-2021",
icon: <BiSolidGraduation />,
},```
型
1条答案
按热度按时间oyxsuwqo1#
这里也有同样的问题,默认情况下,它们被分配了一个
is-hidden
CSS类。我已经在VerticalNode中添加了一个
visible={true}
来暂时解决这个问题,但我认为默认情况下它应该设置为true。