如何使用 Tailwind 和 CSS 创建交替的垂直时间线
How to create alternating vertical timeline with Tailwind & CSS
我正在尝试创建一个时间线,在 React 应用程序中,时间线左侧为奇数 children,右侧为偶数 children。图片演示:
我认为我遇到的问题是我在循环中使用它。因此,对于循环中的每个项目,我希望它显示在左侧或右侧,具体取决于 child 是偶数还是奇数。我已经尝试将变体实用程序与 Tailwind 一起用于奇数和偶数,但我无法配置它。我也尝试过使用简单的 CSS 但无法将其替换。
/project.js
return (
<div className="antialiased text-gray-800 bg-gray-100">
<div className="container relative flex flex-col px-6 mx-auto space-y-8">
<div className="absolute inset-0 z-0 w-2 h-full bg-white shadow-md left-17 md:mx-auto md:right-0 md:left-0"></div>
{projectData && projectData.map((project, index)=> (
<div className="relative z-10">
<img src={project.mainImage.asset.url} alt={project.mainImage.alt} className="timeline-img" />
<div id="container" className="timeline-container">
<div id="pointer" className="timeline-pointer" aria-hidden="true"></div>
<div className="p-6 bg-white rounded-md shadow-md">
<p className="pt-1">{project.description}</p>
</div>
</div>
</div>
))}
</div>
</div>
)
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
#container:nth-child(odd) {
@apply timeline-container-left timeline-container;
}
#pointer:nth-child(odd) {
@apply timeline-pointer timeline-pointer-left;
}
@layer components {
.timeline-img {
@apply object-cover w-24 h-24 border-4 border-white rounded-full shadow-md xs:absolute md:mx-auto md:left-0 md:right-0;
}
.timeline-container {
@apply relative pt-2 xs:pl-28 xs:pt-0 md:w-1/2 md:ml-auto md:pl-16;
}
.timeline-container-left {
@apply md:ml-0 md:mr-auto md:pl-0 md:pr-16;
}
.timeline-pointer {
@apply absolute inset-0 w-4 h-4 transform rotate-45 bg-white left-10 xs:top-11 xs:left-26 md:left-14;
}
.timeline-pointer-left {
@apply md:left-auto md:right-14;
}
}
我只需要申请
@apply timeline-container-left
和
@apply timeline-pointer-left
到容器和指针 div 上
我认为您可以引用每个项目的索引并在 className 内的三元运算符中使用它,其中如果索引模 2 returns 0 则表示它是偶数,就像这样 <div className={`${index % 2 == 0 ? "ml-auto" : "mr-auto" }`}>
我正在尝试创建一个时间线,在 React 应用程序中,时间线左侧为奇数 children,右侧为偶数 children。图片演示:
我认为我遇到的问题是我在循环中使用它。因此,对于循环中的每个项目,我希望它显示在左侧或右侧,具体取决于 child 是偶数还是奇数。我已经尝试将变体实用程序与 Tailwind 一起用于奇数和偶数,但我无法配置它。我也尝试过使用简单的 CSS 但无法将其替换。
/project.js
return (
<div className="antialiased text-gray-800 bg-gray-100">
<div className="container relative flex flex-col px-6 mx-auto space-y-8">
<div className="absolute inset-0 z-0 w-2 h-full bg-white shadow-md left-17 md:mx-auto md:right-0 md:left-0"></div>
{projectData && projectData.map((project, index)=> (
<div className="relative z-10">
<img src={project.mainImage.asset.url} alt={project.mainImage.alt} className="timeline-img" />
<div id="container" className="timeline-container">
<div id="pointer" className="timeline-pointer" aria-hidden="true"></div>
<div className="p-6 bg-white rounded-md shadow-md">
<p className="pt-1">{project.description}</p>
</div>
</div>
</div>
))}
</div>
</div>
)
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
#container:nth-child(odd) {
@apply timeline-container-left timeline-container;
}
#pointer:nth-child(odd) {
@apply timeline-pointer timeline-pointer-left;
}
@layer components {
.timeline-img {
@apply object-cover w-24 h-24 border-4 border-white rounded-full shadow-md xs:absolute md:mx-auto md:left-0 md:right-0;
}
.timeline-container {
@apply relative pt-2 xs:pl-28 xs:pt-0 md:w-1/2 md:ml-auto md:pl-16;
}
.timeline-container-left {
@apply md:ml-0 md:mr-auto md:pl-0 md:pr-16;
}
.timeline-pointer {
@apply absolute inset-0 w-4 h-4 transform rotate-45 bg-white left-10 xs:top-11 xs:left-26 md:left-14;
}
.timeline-pointer-left {
@apply md:left-auto md:right-14;
}
}
我只需要申请
@apply timeline-container-left
和
@apply timeline-pointer-left
到容器和指针 div 上
我认为您可以引用每个项目的索引并在 className 内的三元运算符中使用它,其中如果索引模 2 returns 0 则表示它是偶数,就像这样 <div className={`${index % 2 == 0 ? "ml-auto" : "mr-auto" }`}>