Chronologie de la feuille de route de conception ReactJS

Question

J'ai donc le design que je veux faire. Fondamentalement, il s'agit d'une chronologie qui va du coin inférieur gauche au coin supérieur droit de la page. De plus, je dois placer des éléments div entre les lignes. Je veux aussi qu'il soit réactif, en particulier sa longueur sera réduite, mais je veux quand même que les lignes ressortent vers le haut. Des suggestions sur la façon d'y parvenir en utilisant ReactJS et TailwindCSS ? Les exemples que j'ai trouvés sur Internet sont des styles de chronologie horizontale et verticale en ligne. Il n'y a aucun exemple de chronologies courbes

P粉364129744 · Answer

J'ai créé une chronologie similaire à l'image que vous avez fournie, en utilisant principalement grid.

Dans l'exemple que j'ai créé, il y a 3 utilitaires personnalisés一个> :

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%
    );
  }
}

borderGray classe crée des bordures grises en haut et en bas de l'élément et centre le texte.
textClass 负责 font-size Réactivité. Cette classe peut être complètement modifiée. Cela a l'air très pratique ici.
slantedLine classe crée une ligne diagonale traversant l'élément du coin inférieur gauche au coin supérieur droit. Voici la réponse que j'ai obtenue une fois : Dessiner du CSS en diagonale en arrière-plan div

Maintenant, allez à HTML.

J'ai créé trois variantes différentes qui peuvent être modifiées de l'une à l'autre en fonction de la taille de l'écran, au cas où vous souhaiteriez utiliser plusieurs variantes dans votre conception réactive. Ces variantes sont les suivantes :

Voici à quoi ça ressemble sous le capot :

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

Jeu Tailwind

Description :

Il existe trois différences entre ces variantes :

col-span-{n} par conteneur de texte. Documentation
grid-cols-{n} 和 grid-rows-{n}. Docs-1 Docs-2
grid 内每个元素的 col-start-{n} 和 row-start-{n} col-start-{n} et row-start-{n} pour chaque élément de . Montrons avec la deuxième variante. Débarrassons-nous de ces classes pour voir comment cela fonctionne :
Chaque élément impair n'est qu'une zone de texte. Nous insérons un paragraphe dans ces divs pour afficher le texte/liens requis :

slantedLine Chaque élément pair est une région de la classe diagonale (). La ligne diagonale va du coin inférieur gauche au coin supérieur droit. Lorsque nous rassemblons deux éléments avec de telles lignes, nous obtenons l'effet de bordures diagonales supérieure et inférieure :

Ensemble :
🎜🎜

Cela ne vous donnera peut-être pas le design exact que vous recherchez, mais cela peut vous donner une idée de la façon d'avancer à partir de là.

Si vous avez des questions, n'hésitez pas à me le faire savoir. J'espère que ça aide.