Garis masa peta jalan reka bentuk ReactJS

Question

Jadi saya ada design yang saya nak buat. Pada asasnya ia adalah garis masa yang pergi dari sudut kiri bawah ke sudut kanan atas halaman. Selain itu, saya perlu meletakkan beberapa elemen div antara baris.

Saya juga mahu ia responsif, khususnya panjangnya akan dikurangkan, tetapi saya masih mahu garisan menonjol ke atas.

Sebarang cadangan tentang cara untuk mencapai ini menggunakan ReactJS dan TailwindCSS?

Contoh yang saya temui di internet ialah gaya garis masa mendatar dan menegak dalam talian. Tiada contoh untuk membengkokkan garis masa

Answer 1

Saya mencipta garis masa yang serupa dengan imej yang anda berikan, kebanyakannya menggunakan grid.

Dalam contoh yang saya buat, terdapat 3 utiliti tersuai一个>:

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 kelas mencipta sempadan kelabu di bahagian atas dan bawah elemen dan memusatkan teks.
2. textClass 负责 font-size Responsif. Kelas ini boleh ditukar sepenuhnya. Ia kelihatan sangat selesa di sini.
Kelas
3. slantedLine mencipta garisan pepenjuru melalui elemen dari sudut kiri bawah ke sudut kanan atas. Ini jawapan yang pernah saya dapat: Lukis CSS pepenjuru dalam latar belakang div

---

Sekarang, pergi ke HTML.

Saya mencipta tiga variasi berbeza yang boleh ditukar daripada satu kepada yang lain berdasarkan saiz skrin, sekiranya anda ingin menggunakan berbilang variasi dalam reka bentuk responsif anda. Variasi ini adalah seperti berikut:

Inilah rupanya di bawah tudung:

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 Play

---

Penerangan:

Terdapat tiga perbezaan antara varian ini:

1. col-span-{n} setiap bekas teks. Dokumentasi
2. grid-cols-{n} 和 grid-rows-{n}. Dokumen-1 Dokumen-2
3. grid 内每个元素的 col-start-{n} 和 row-start-{n} col-start-{n} dan row-start-{n} untuk setiap elemen dalam . Jom tunjukkan dengan varian kedua. Mari kita buang kelas ini untuk melihat cara ia berfungsi:

   Setiap elemen ganjil hanyalah kawasan teks. Kami memasukkan perenggan ke dalam div ini untuk memaparkan teks/pautan yang diperlukan:

   slantedLine Setiap elemen genap ialah kawasan kelas pepenjuru (). Garis pepenjuru pergi dari sudut kiri bawah ke sudut kanan atas. Apabila kita meletakkan dua elemen dengan garisan sedemikian bersama-sama, kita mendapat kesan sempadan pepenjuru atas dan bawah:

   Bersama:

   🎜🎜

   ---

   Ia mungkin tidak memberikan anda reka bentuk yang tepat yang anda cari, tetapi ia boleh memberi anda idea tentang cara untuk bergerak ke hadapan dari sini.

   Jika anda mempunyai soalan, sila beritahu saya. Saya harap ia membantu.