ReactJS 設計ロードマップのタイムライン

Question

つまり、作りたいデザインがあります。基本的には、ページの左下隅から右上隅に向かうタイムラインです。さらに、行の間にいくつかの div 要素を配置する必要があります。

また、応答性も良くしたいです。特に長さは短くなりますが、それでも線が上に突き出るようにしたいと考えています。

ReactJS と TailwindCSS を使用してこれを実現する方法について何か提案はありますか?

私がインターネットで見つけた例は、オンラインの水平方向と垂直方向のタイムライン スタイルです。タイムラインを曲げた例はありません

Answer 1

私は、主に grid を使用して、提供された画像と同様のタイムラインを作成しました。

私が作成した例には、3 つの カスタム ユーティリティ :

があります。

メイン.css：

リーリー

1. borderGray クラスは要素の上部と下部に灰色の境界線を作成し、テキストを中央に配置します。
2. textClass は font-size の応答性を担当します。このクラスは完全に変更することができます。ここはとても便利そうです。
3. slantedLine クラスは、左下隅から右上隅まで要素を通る対角線を作成します。これは私が以前得ていた答えです: div背景CSSで斜めの線を描くCSS

---

次に、HTML に移動します。

レスポンシブ デザインで複数のバリエーションを使用したい場合に備えて、画面サイズに基づいて変更できる 3 つの異なるバリエーションを作成しました。 これらのバリエーションは次のとおりです。

ボンネットの下は次のようになります。

HTML：

リーリー

追い風プレイ

---

イラスト:

これらのバリアントには 3 つの違いがあります:

各テキストコンテナの
1. col-span-{n}。 ＃＃＃書類＃＃＃＃＃＃ grid-cols-{n}
および
2. grid-rows-{n}。 ドキュメント-1 ドキュメント-2 grid
内の各要素の
3. col-start-{n} および row-start-{n}。 ドキュメント-1 ドキュメント-2 奇数番号の各要素は単なるテキスト領域です。これらの div に段落を挿入して、必要なテキスト/リンクを表示します。

   偶数番号の各要素は、対角線タイプ (slantedLine

   ) の領域です。対角線は左下隅から右上隅まで伸びています。このような線を持つ 2 つの要素を組み合わせると、上下の斜めの境界線の効果が得られます。

   ＃＃＃一緒に：

   ---

   あなたが探している正確なデザインは得られないかもしれませんが、ここからどのように前進するかについてのアイデアを得ることができます。

   ご質問がございましたら、お知らせください。 お役に立てれば幸いです。