Listes avec Tailwind CSS

Améliorez l’aspect des listes d’éléments avec Tailwind CSS. Diverses alternatives pour créer des listes UL et LI, avec votre code HTML et les classes d’utilisation. Configurations distinctes avec différents types de balles, y compris basées sur des images SVG.

Nous allons commencer une série d’articles dédiés à la création d’interfaces types de sites Web en utilisant le framework CSS Tailwind, je suis sûr que tu es connu. Cet article principal va nous être dédié à travailler avec des listes d’éléments.

Si quelqu’un ne connaît pas Tailwind CSS, c’est un framework basé sur des classes d’utilitaires que nous pouvons apprendre à utiliser dans le Manuel de Tailwind CSS.

Listes d’éléments et Tailwind CSS

Le framework CSS Tailwind vient avec un réinitialiser les styles CSSde façon à ce que lorsque nous utilisons les listes d’éléments, je me réfère aux étiquettes <ul> principalement, estas aparecen totalement carentes de formato. Nous savons que les listes sont très récurrentes dans le jour de la conception Web et que nous avons ces petits points (balles) à chaque élément résultant d’une pratique pratique, visuellement réussie.

Bien sûr, en plus des célèbres balles de la liste, nous avons également été ravis de les entendre icônes ou autres types d’éléments qui signale chaque élément de la liste. Nous ne pouvons pas l’utiliser directement avec HTML et CSS, mais nous pouvons l’utiliser éléments supplémentaires comme images SVG.

Dans la longueur de cet article, nous avons plusieurs exemples de listes avec différents styles qui illustrent des cas typiques de travail avec des listes pour que vous ayez un format approprié et diversifié.

Listes avec puces HTML

Nous allons commencer par le plus typique et le plus simple, qui sera de construire une liste avec des puces de ceux qui suivent le propre HTML, si chaque élément apparaîtra sur une ligne différente du type des listes.

<ul class="list-disc pl-5">

  <li class="mb-2">Elemento 1</li>

  <li class="mb-2">Elemento 2</li>

  <li class="mb-2">Elemento 3</li>

</ul>

Dans cet exemple, nous avons utilisé les balles avec la classe list-disc. Ce sont les puces « natives » de HTML, qui sont présentées comme prédéterminées.

Il s’agit donc d’un exemple de ce type, mais dans Tailwind CSS, lors de la réinitialisation du CSS, les puces n’apparaissent pas de manière prédéfinie.

Également avec la classe pl-5 sur l’étiquette <ul> nous avons donc un peu de rembourrage à la izquierda pour que les balles ne soient pas fixées au bord. Nous tenons également la classe mb-2 à chaque élément <li>qui permet qu’il existe une petite marge en la partie inférieure pour séparer les éléments de la liste.

Changer le style des balles

Il existe d’autres types de styles de puces en HTML mais il n’y a pas de classes d’utilisation pour eux, car il est nécessaire de les utiliser classes arbitraires de Tailwind CSS.

Par exemple, si nous voulons que les balles apparaissent comme des cercles sans bruit, nous pouvons utiliser ce code ici :

<ul class="list-[circle] pl-5">

Liste en ligne avec Tailwind CSS

Il est parfois utile de consulter des listes en ligne, c’est à dire là où un des éléments est sur la même ligne. Pour esto cada uno de los <li> debería ser inline-block.

Pour que ce style soit bien possible, nous pouvons mettre en avant un style représentant les éléments, par exemple encajarlos dentro de su propia caja et quede breveter votre individualité.

<ul class="my-4">

    <li class="inline-block bg-orange-200 rounded-full px-4 py-1 mr-2">CSS</li>

    <li class="inline-block bg-orange-200 rounded-full px-4 py-1 mr-2">HTML</li>

    <li class="inline-block bg-orange-200 rounded-full px-4 py-1 mr-2">Javascript</li>

</ul>

Dans cette liste, nous avons placé différents styles pour vos éléments et nous avons déjà la bonne liste UL avec une simple marge arrière et inférieure. Les styles des éléments LI utilisés sont les suivants :

bg-orange-200: Appliquez un fond plan, de couleur jaune clair à chaque élément de la liste.
rounded-full: Nous nous efforcerons d’avoir un bord totalement redondeado, et donc un effet de capsule.
px-4 oui py-1: Ajoutez un espace de remplissage horizontal (px-4) et vertical (py-1) pour que les éléments respirent au-delà du coffre.
mr-2: Ajoutez une marge au droit de chaque élément pour séparer un peu entre vous.

Liste des éléments verticale avec bordure de séparation entre eux

Nous allons maintenant faire une liste que nous pouvons utiliser parfaitement comme barre de navigation horizontale. Il y a une liste où les éléments apparaissent en bas de l’autre, où les éléments tendent à former un séparateur entre eux.

<ul class="text-center">

    <li class="font-bold uppercase border-b-2 border-gray-300 pb-2 mb-2">Productos</li>

    <li class="font-bold uppercase border-b-2 border-gray-300 pb-2 mb-2">Quienes somos</li>

    <li class="font-bold uppercase pb-2 mb-2">Contacto</li>

</ul>

Dans ce cas, nous avons une liste du contenu central, où nous avons un même style pour tous les éléments, moins pour le dernier, que nous avons quitté le bord inférieur, ne pouvons pas que d’autres éléments soient séparés.

Les styles déterminés que nous avons utilisés dans cet exemple sont :

font-bold: Pone negrita al texto.
uppercase: Transformez le texte pour que tout apparaisse en mayúsculas.
border-b-2 oui border-gray-300: Deux classes d’utilisation nécessaires pour ajouter une bordure dans la partie inférieure de chaque élément avec un gros de 2 pixels et une couleur gris clair.
pb-2: Ajoutez un dossier dans la partie inférieure de chaque élément pour séparer le texte de la bordure de l’élément.
mb-2: Ajoutez une marge dans la partie inférieure de chaque élément pour séparer les éléments entre vous.

Éléments de liste avec la balle personnalisée au milieu SVG

Dans le dernier exemple, nous allons montrer comment nous pouvons éliminer les puces des listes et les remplacer par des images personnalisées. Nous avons donc un effet différent sur les listes que nous ne pouvons pas obtenir uniquement avec le HTML natif.

Les images personnalisées vont être utilisées avec des fichiers SVG, car ce type de format est idéal pour l’utilisation que nous voulons réaliser. Nous vous aiderons à créer des listes de tous les fichiers avec un fichier unique, qui peut s’adapter parfaitement et conserver la meilleure dimension de chaque écran de l’appareil sans perdre la qualité.

<ul class="list-none pl-0">

    <li class="flex items-center mb-2">

        <img src="arrow.svg" alt="Flecha" class="w-4 h-4 mr-2">

        Discos duros

    </li>

    <li class="flex items-center mb-2">

        <img src="arrow.svg" alt="Flecha" class="w-4 h-4 mr-2">

        Procesadores

    </li>

    <li class="flex items-center mb-2">

        <img src="arrow.svg" alt="Flecha" class="w-4 h-4 mr-2">

        Monitores

    </li>

</ul>

Dans ce cas, nous utilisons une liste UL sans puces prédéterminées, pour nous utiliser la classe d’utilisation list-none. Nous sommes également utilisés pl-0 Pour éliminer le rembourrage à la demande pour que la liste commence à partir de la bordure, même si cela ne sera pas strictement nécessaire, ce sont les styles qui fixent de manière prédéterminée la réinitialisation.

Également pour les éléments de la liste que nous avons appliqués aux styles suivants dans les classes d’utilisation :

Cada <li> tu as une classe flex pour aligner horizontalement l’image et le texte.
La classe items-center nous nous assurons que l’image et le texte sont alignés verticalement au centre.
mb-2 nous savons que c’est : un peu d’espace debajo de chaque élément.

Nous avons pour la dernière fois l’image SVG comme Bullet, qui a également certains styles :

w-4 oui h-4: définissez la taille de l’image SVG. Vous pouvez ajuster cela selon votre design. Merci à ce que l’image SVG ne perdra jamais en qualité.
mr-2: appliquez une marge sur le droit de l’image pour séparer le texte de l’accompagnement.

to desarrolloweb.com

Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931