所以我有我想做的設計。基本上它是一個從頁面左下角到右上角的時間軸。此外,我需要在行之間放置一些 div 元素。
我也希望能夠做出回應,具體來說,它的長度會減少,但我仍然希望線條向上突出。
對於如何使用 ReactJS 和 TailwindCSS 實現這一點,有什麼建議嗎?
我在網路上找到的例子是線上水平和垂直時間軸樣式。沒有關於彎曲時間線的範例
P粉3641297442024-03-30 10:17:59
我創建了一個類似於您提供的圖像的時間線,主要使用 grid
。
在我創建的範例中,有 3 個自訂實用程式一个>:
@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%
);
}
}
borderGray
類別在元素的頂部和底部建立灰色邊框並將文字置中。 textClass
負責 font-size
回應能力。這個類別可以完全改變。這裡看起來很方便。 slantedLine
類別會建立一條從左下角到右上角穿過元素的對角線。這是我曾經得到的答案: 在 div 背景中繪製對角線CSS現在,到 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
這些變體之間有三個差異:
col-span-{n}
。 文件grid-cols-{n}
和 grid-rows-{n}
。 Docs-1 Docs-2#grid
內每個元素的 col-start-{n}
和 row-start-{n}
。 Docs-1 #每個奇數元素只是文字區域。我們在這些 div 中插入一個段落來顯示所需的文字/連結:
#每個偶數元素都是對角線類別的一個區域 (slantedLine
)。對角線從左下角到右上角。當我們將兩個帶有這種線條的元素放在一起時,我們會得到頂部和底部對角線邊框的效果:
它可能不會為您提供您正在尋找的確切設計,但它可以讓您了解如何從這裡繼續前進。
如果您有疑問,請告訴我。 我希望它有所幫助。