ReactJS设计路线图时间表

Question

所以我有我想要做的设计。基本上它是一个从页面左下角到右上角的时间线。此外，我需要在行之间放置一些 div 元素。

我也希望能够做出响应，具体来说，它的长度会减少，但我仍然希望线条向上突出。

对于如何使用 ReactJS 和 TailwindCSS 实现这一点，有什么建议吗？

我在互联网上找到的例子是在线水平和垂直时间轴样式。没有关于弯曲时间线的示例

Answer 1

我创建了一个类似于您提供的图像的时间线，主要使用 grid。

在我创建的示例中，有 3 个自定义实用程序：

main.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .borderGray {
    @apply border-y-[1px] border-[lightgray] text-center;
  }

  .textClass {
    @apply m-2 break-words border-2 border-black text-[0.8rem] sm:text-sm md:text-base;
  }

  .slantedLine {
    background: linear-gradient(
      to top left,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) calc(50% - 1px),
      lightgray 50%,
      rgba(0, 0, 0, 0) calc(50% + 1px),
      rgba(0, 0, 0, 0) 100%
    );
  }
}

1. borderGray 类在元素的顶部和底部创建灰色边框并将文本居中。
2. textClass 负责 font-size 响应能力。这个类可以完全改变。这里看起来很方便。
3. slantedLine 类创建一条从左下角到右上角穿过元素的对角线。这是我曾经得到的答案： 在 div 背景中绘制对角线CSS

---

现在，转到 HTML。

我创建了三种不同的变体，可以根据屏幕尺寸从一种变体更改为另一种变体，以防您想在响应式设计中使用多种变体。 这些变体如下所示：

这就是引擎盖下的样子：

HTML：

  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link



  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link



  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link
  

  

  
Some Text/Link

Tailwind 播放

---

说明：

这些变体之间存在三个差异：

1. 每个文本容器的 col-span-{n}。 文档
2. grid-cols-{n} 和 grid-rows-{n}。 Docs-1 Docs-2
3. grid 内每个元素的 col-start-{n} 和 row-start-{n}。 Docs-1

   每个奇数元素只是文本区域。我们在这些 div 中插入一个段落来显示所需的文本/链接：

   每个偶数元素都是对角线类的一个区域 (slantedLine)。对角线从左下角到右上角。当我们将两个带有这种线条的元素放在一起时，我们会得到顶部和底部对角边框的效果：

   一起：

   ---

   它可能不会为您提供您正在寻找的确切设计，但它可以让您了解如何从这里继续前进。

   如果您有疑问，请告诉我。 我希望它有所帮助。