Cet article fournira la procédure de définition de l'image de style liste d'un bloc de liste dans Tailwind.
Comment définir la classe d’image de style de liste dans Tailwind ?
La classe d'image de style de liste est utilisée pour fournir une image comme marqueur de liste dans Tailwind. Par défaut, Tailwind fournit uniquement le « liste-image-aucune ' classe qui ne peut être utilisée que pour supprimer tout marqueur d'image précédemment défini pour une liste.
Syntaxe
La syntaxe d'utilisation de la classe d'image de style liste dans Tailwind est la suivante :
< ul classe = 'liste-image-[url({Image Url})]' > < / ul >
Cette syntaxe fournit l'image spécifiée comme marqueur pour l'élément de liste.
< ul classe = 'liste-image-aucune' > < / ul >
Cette syntaxe supprime toutes les images précédemment définies comme marqueur d'un élément de liste.
Utilisons la syntaxe définie ci-dessus pour utiliser une image comme marqueur dans une liste non ordonnée. Dans cette démonstration, l’utilisateur dispose d’une image nommée « pointeur.png ' présent dans le même dossier de projet Tailwind. Si l'image est présente dans un autre dossier, l'utilisateur doit fournir le chemin complet vers la classe d'image de style liste. Nous utiliserons cette image comme marqueur de liste en utilisant la classe « list-image ».
< div classe = 'flex justifier-centre' >
< ul classe = ' list-inside list-image-[url(handpointer.png)] space-y-2 arrondi-md bg-green-400 p-2' >
EXEMPLE DE LISTE
< 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éé et reçoit le ' fléchir ' classe qui aligne les éléments horizontalement dans un conteneur.
- Le ' justifier-centre ' La classe aligne les éléments enfants au centre du conteneur.
- Ensuite, le «
- Il est fourni avec le « liste à l'intérieur ' classe qui placera le marqueur d'élément de liste spécifié à l'intérieur du bloc de liste.
- Le ' liste-image-[url({Image Url})] 'La classe est utilisée pour fournir une image en tant que marqueur d'élément de liste à l'élément.
- Le ' espace-y-{numéro} ' La classe fournit l'espace vertical entre les éléments de la liste.
- Le ' arrondi-md ' La classe arrondit les coins du bloc de liste.
- Le ' bg-{couleur}-{numéro} ' La classe est utilisée pour fournir la couleur d'arrière-plan au bloc de liste.
- Le ' p-2 ' La classe fournit la bordure de l'élément de liste.
- Trois éléments de liste sont créés à l'aide du ' <ça> ' Mots clés.
Sortir:
On peut voir dans le résultat qu'une image de pointeur de main est définie comme marqueur pour les éléments de la liste :
Utilisation de variantes d'état avec une classe d'images de style de liste dans Tailwind
Tailwind propose diverses variantes d'état telles que le survol, la mise au point et l'actif, qui aident à créer des conceptions interactives. Pour utiliser une classe d'image de style liste avec ces états, la syntaxe suivante est utilisée :
< ul classe = '{state} :list-image-{aucun OU URL de l'image}' > < / ul >Utilisons la syntaxe définie ci-dessus pour utiliser la propriété d'image de style liste avec le ' flotter » indique Tailwind. Dans cette démonstration, la liste recevra une image comme marqueur de liste. Cependant, en utilisant le « flotter ', l'image sera supprimée.
< div classe = 'flex justifier-centre' >
< ul classe = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 arrondi-md bg-green-400 p-2' >
EXEMPLE DE LISTE
< 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, le ' survol : liste-image-aucune ' La classe supprime l'image précédemment définie comme marqueur de liste.
Sortir:
Dans la sortie ci-dessous, l'image de style liste est réinitialisée à « aucun 'Lorsque l'utilisateur passe le curseur de la souris dessus. Pour cette raison, l’image utilisée comme marqueur de liste a été supprimée.
Utilisation de points d'arrêt avec une classe d'image de style de liste dans Tailwind
Les points d'arrêt sont des requêtes multimédias prédéfinies pour les éléments de Tailwind. Ils sont utilisés pour rendre la conception réactive à différentes tailles d'écran. Ces points d'arrêt incluent sm, md, lg, xl et 2xl. Pour utiliser une classe d'image de style liste avec un point d'arrêt, la syntaxe suivante est utilisée :
< ul classe = '{point d'arrêt} :list-image-{aucun OU URL de l'image}' > < / ul >Utilisons la syntaxe définie ci-dessus pour changer le marqueur de liste d'un ' image ' à ' aucun ' en utilisant un point d'arrêt. Dans cet exemple, le marqueur d'image sera supprimé une fois que la taille de l'écran augmentera la largeur de « Maryland 'point d'arrêt :
< div classe = 'flex justifier-centre' >
< ul classe = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 arrondi-md bg-green-400 p-2' >
EXEMPLE DE LISTE
< 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, le ' md: liste-image-aucune La classe ' supprime le marqueur de la liste d'images lorsque la taille de l'écran atteint ' Maryland 'point d'arrêt.
Sortir:
Dans la sortie ci-dessous, le marqueur d'image est supprimé lorsque la taille de l'écran atteint le point d'arrêt md :
Il s’agit de définir l’image de style liste dans Tailwind.
Conclusion
Tailwind dispose de deux classes d'images de style liste prédéfinies pour supprimer ou définir le marqueur de liste d'un élément sur une image. Le ' liste-image-[url({Image Url})] ' La classe fournit l'image spécifiée comme marqueur de liste. Le ' liste-image-aucune ' La classe supprime toute image précédemment fournie comme marqueur de liste. Cet article a fourni la procédure de définition du type de style de liste dans Tailwind.