Supposons qu'un utilisateur doive créer une liste d'éléments pour sa page Web. Pour faciliter le processus de conception, Tailwind propose diverses classes de style liste qui peuvent être utilisées pour modifier le type, la position et l'alignement des éléments de la liste.
Cet article fournira la procédure de définition du type de style de liste dans Tailwind.
Comment définir le type de style de liste dans Tailwind ?
Tailwind propose trois types de styles de liste par défaut. Ils sont utilisés pour fournir le « marqueur ' Style pour les éléments de la liste. Les trois classes de types de style de liste par défaut sont décrites comme suit :
- liste-disque : Cette classe fournira les puces rondes comme marqueur de liste.
- liste-décimale : Cette classe fournira les nombres décimaux comme marqueur de liste.
- liste-aucune : Cette classe supprimera tous les marqueurs de liste des éléments.
La syntaxe d'utilisation des types de style de liste est la suivante :
< ul classe = 'liste-{style}' > < / ul >
Pour une meilleure compréhension, la démonstration ci-dessous utilisera la syntaxe définie ci-dessus pour fournir différents styles de marqueurs pour répertorier les éléments. Dans cet exemple, trois éléments de liste seront créés et dotés des différents styles de marqueurs à l'aide des classes de styles de liste par défaut dans Tailwind :
< p classe = 'text-center text-xl font-bold' >Liste différente par défaut Style Types dans Tailwind< / p >
< br >
< div classe = 'flex justifier-centre espace-x-20 bg-slate-100 arrondi-lg mx-4 p-2' >
< ul classe = 'liste-disque' >
LISTE # 1
< que > Ceci est le premier élément < / que >
< que > Ceci est le deuxième élément < / que >
< que >C'est le troisième élément< / que >
< / ul >
< ul classe = 'liste-décimale' >
LISTE # 2
< que > Ceci est le premier élément < / que >
< que > Ceci est le deuxième élément < / que >
< que >C'est le troisième élément< / que >
< / ul >
< ul classe = 'liste-aucune' >
LISTE # 3
< que > Ceci est le premier élément < / que >
< que > Ceci est le deuxième élément < / que >
< que >C'est le troisième élément< / que >
< / ul >
< / div >
L'explication du code ci-dessus est la suivante :
- UN ' L'élément ' est créé avec un ' xl ' taille de police et un ' audacieux ” poids de la police. Le contenu textuel de l’élément est positionné au centre à l’aide du « centre de texte ' classe.
- Après un saut de ligne, un « L'élément ' est créé et est pourvu d'un ' fléchir ' classe. Cela créera un conteneur qui alignera les éléments enfants horizontalement.
- Le ' justifier-centre ' La classe placera les objets au centre du conteneur.
- Le ' espace-x-{taille} ' La classe fournit l'espace horizontal entre les éléments.
- Le ' bg-{couleur}-{numéro} ' La classe définit l'arrière-plan du conteneur sur la couleur spécifiée.
- Le ' arrondi-lg ' La classe rend les coins du conteneur arrondis.
- Le ' mx-4 ' La classe fournit la marge horizontale du conteneur flexible.
- Le ' p-2 ' La classe fournit un rembourrage au conteneur flexible.
- Ensuite, trois éléments de liste sont créés et sont dotés de différents types de styles de liste à l'aide de l'option « liste-{type} ' classe.
Sortir:
À partir du résultat ci-dessous, on peut voir que la première liste utilise des puces, la seconde utilise des nombres décimaux et la troisième n'utilise aucun marqueur d'élément.
Utilisation de la classe de style de liste avec les variantes d'état dans Tailwind
La classe de style de liste peut être utilisée avec les variantes d'état par défaut dans Tailwind pour rendre la conception plus dynamique. À l'aide des variantes d'état de survol, de focus et d'état actif, l'utilisateur peut modifier le style de marqueur des éléments de la liste chaque fois que l'état spécifié est déclenché. La syntaxe d'utilisation de la classe de style de liste avec des variantes d'état est la suivante :
< ul classe = '{state} :liste-{style}...' > < / ul >Voici un exemple d'utilisation du type de style de liste avec un état « survol », où l'utilisateur peut modifier le style du marqueur en survolant le bloc de liste :
< p classe = 'text-center text-xl font-bold' > Passez le curseur sur le bloc de liste pour modifier le style de marqueur < / p >
< br >
< div classe = 'flex justifier-centre espace-x-20 bg-slate-100 arrondi-lg mx-4 p-2' >
< ul classe = 'liste-disque survol : liste-décimale' >
LISTE # 1
< que > Ceci est le premier élément < / que >
< que > Ceci est le deuxième élément < / que >
< que >C'est le troisième élément< / que >
< / ul >
< / div >Dans le code ci-dessus, la liste est fournie avec le « liste-disque ' classe comme type de style de liste par défaut. Cependant, en utilisant le « survol : liste-décimale ', le type de style de liste sera modifié lorsque l'utilisateur passe le curseur de la souris sur le bloc de liste.
Sortir:
La sortie ci-dessous montre que le style de type de liste passe d'une liste à puces à une liste numérotée lorsque le curseur passe sur le bloc de liste.
Utilisation de la classe de style de liste avec les points d'arrêt dans Tailwind
Les points d'arrêt sont utilisés pour une conception réactive de la mise en page pour différentes tailles d'écran. Les cinq points d'arrêt par défaut fournis par Tailwind sont sm, md, lg, xl et 2xl. La syntaxe suivante est utilisée pour fournir à la classe de style de type liste un point d'arrêt :
< ul classe = '{point d'arrêt} :liste-{style}...' > < / ul >Voici un exemple d'utilisation du type de style de liste avec un ' Maryland ', où le style du marqueur changera lorsque la taille de l'écran atteint le point d'arrêt 'md':
< p classe = 'text-center text-xl font-bold' >Augmenter l'écran Taille pour changer le style de marqueur < / p >
< br >
< div classe = 'flex justifier-centre espace-x-20 bg-slate-100 arrondi-lg mx-4 p-2' >
< ul classe = 'liste-disque md:liste-decimal' >
LISTE # 1
< que > Ceci est le premier élément < / que >
< que > Ceci est le deuxième élément < / que >
< que >C'est le troisième élément< / que >
< / ul >
< / div >Dans le code ci-dessus, la liste est fournie avec le « liste-disque ' classe comme style par défaut. Cependant, en utilisant le « md: liste-décimale ', le type de style de liste changera pour la taille de l'écran 'md'.
Sortir:
Comme vous pouvez le voir dans le résultat ci-dessous, le type de style de liste passe de disque à décimal lorsque la taille de l'écran atteint ' Maryland 'point d'arrêt.
Il s’agit de définir le type de style de liste dans Tailwind.
Conclusion
Tailwind fournit trois classes de types de style de liste prédéfinies pour modifier le style de liste d'un élément. Le ' liste-disque ' La classe fournit les puces pour répertorier les éléments. Le ' liste-décimale ' La classe fournit les numéros pour répertorier les éléments. Le ' liste-aucune ' La classe crée une liste qui n'utilise aucun marqueur d'élément. Cet article a fourni la procédure de définition du type de style de liste dans Tailwind.