Zeitleiste der ReactJS-Design-Roadmap

Question

Ich habe also das Design, das ich machen möchte. Im Grunde handelt es sich um eine Zeitleiste, die von der unteren linken Ecke bis zur oberen rechten Ecke der Seite reicht. Außerdem muss ich einige div-Elemente zwischen den Zeilen platzieren.

Ich möchte auch, dass es reagiert, insbesondere wird die Länge reduziert, aber ich möchte immer noch, dass die Linien nach oben ragen.

Irgendwelche Vorschläge, wie man dies mit ReactJS und TailwindCSS erreichen kann?

Die Beispiele, die ich im Internet gefunden habe, sind Online-Stile für horizontale und vertikale Zeitleisten. Es gibt keine Beispiele für das Biegen von Zeitlinien

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)。对角线从左下角到右上角。当我们将两个带有这种线条的元素放在一起时，我们会得到顶部和底部对角边框的效果：

   一起：

   ---

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

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