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)。對角線從左下角到右上角。當我們將兩個帶有這種線條的元素放在一起時，我們會得到頂部和底部對角線邊框的效果：

   #一起：

   #

   ---

   它可能不會為您提供您正在尋找的確切設計，但它可以讓您了解如何從這裡繼續前進。

   如果您有疑問，請告訴我。 我希望它有所幫助。