Angenommen, ein Benutzer muss eine Liste mit Elementen für seine Webseite erstellen. Um den Entwurfsprozess zu vereinfachen, stellt Tailwind verschiedene Klassen im Listenstil bereit, die zum Ändern des Typs, der Position und der Ausrichtung der Listenelemente verwendet werden können.
In diesem Artikel wird das Verfahren zum Festlegen des Listenstiltyps in Tailwind beschrieben.
Wie lege ich den Listenstiltyp in Tailwind fest?
Tailwind bietet drei Standardtypen für Listenstile. Sie dienen der Bereitstellung der „ Marker ”-Stil für Listenelemente. Die drei Standardklassen für Listenstiltypen werden wie folgt beschrieben:
- Listen-Disc: Diese Klasse stellt die runden Aufzählungspunkte als Listenmarkierung bereit.
- Listendezimalzahl: Diese Klasse stellt die Dezimalzahlen als Listenmarkierung bereit.
- list-none: Diese Klasse entfernt alle Listenmarkierungen von den Elementen.
Die Syntax für die Verwendung der Listenstiltypen lautet wie folgt:
< ul Klasse = 'Listenstil}' > < / ul >
Zum besseren Verständnis wird in der unten bereitgestellten Demonstration die oben definierte Syntax verwendet, um verschiedene Markierungsstile für Listenelemente bereitzustellen. In diesem Beispiel werden drei Listenelemente erstellt und mithilfe der Standard-Listenstilklassen in Tailwind mit den verschiedenen Markierungsstilen versehen:
< P Klasse = „text-center text-xl font-bold“ >Standardmäßige andere Liste Stil Typen im Rückenwind< / P >
< br >
< div Klasse = „flex justify-center space-x-20 bg-slate-100 abgerundet-lg mx-4 p-2“ >
< ul Klasse = „list-disc“ >
AUFFÜHREN # 1
< Das >Dies ist der erste Artikel< / Das >
< Das >Dies ist der zweite Punkt< / Das >
< Das >Dies ist der dritte Punkt< / Das >
< / ul >
< ul Klasse = „list-decimal“ >
AUFFÜHREN # 2
< Das >Dies ist der erste Artikel< / Das >
< Das >Dies ist der zweite Punkt< / Das >
< Das >Dies ist der dritte Punkt< / Das >
< / ul >
< ul Klasse = „list-none“ >
AUFFÜHREN # 3
< Das >Dies ist der erste Artikel< / Das >
< Das >Dies ist der zweite Punkt< / Das >
< Das >Dies ist der dritte Punkt< / Das >
< / ul >
< / div >
Die Erklärung des obigen Codes lautet wie folgt:
- A ' „Element wird mit einem „“ erstellt xl ” Schriftgröße und ein „ deutlich ”Schriftstärke. Der Textinhalt des Elements wird mithilfe des „“ in der Mitte positioniert. Text-Center ' Klasse.
- Nach einem Zeilenumbruch erscheint ein „ ”-Element wird erstellt und mit einem „ biegen ' Klasse. Dadurch wird ein Container erstellt, der die untergeordneten Elemente horizontal ausrichtet.
- Der ' justify-center Die Klasse „Platziert die Gegenstände in der Mitte des Containers.
- Der ' space-x-{size} Die Klasse „stellt den horizontalen Abstand zwischen den Elementen bereit.
- Der ' bg-{color}-{number} Die Klasse „Setzt den Hintergrund des Containers auf die angegebene Farbe.
- Der ' abgerundet-lg Die Klasse „macht die Ecken des Containers abgerundet.
- Der ' mx-4 Die Klasse „stellt den horizontalen Rand für den Flex-Container bereit.
- Der ' S. 2 Die Klasse bietet Polsterung für den Flex-Container.
- Als nächstes werden drei Listenelemente erstellt und über die Funktion „ list-{type} ' Klasse.
Ausgabe:
Aus der folgenden Ausgabe ist ersichtlich, dass die erste Liste Aufzählungspunkte verwendet, die zweite Dezimalzahlen verwendet und die dritte keine Elementmarkierung verwendet.
Verwenden der List Style-Klasse mit den Statusvarianten in Tailwind
Die Listenstilklasse kann mit den Standardzustandsvarianten in Tailwind verwendet werden, um das Design dynamischer zu gestalten. Mithilfe der Hover-, Focus- und Active-State-Varianten kann der Benutzer den Markierungsstil der Listenelemente ändern, wann immer der angegebene Status ausgelöst wird. Die Syntax für die Verwendung der Listenstilklasse mit Zustandsvarianten lautet wie folgt:
< ul Klasse = „{state}:list-{style}…“ > < / ul >Hier ist ein Beispiel für die Verwendung des Listenstiltyps mit einem „Hover“-Status, bei dem der Benutzer den Markierungsstil ändern kann, indem er mit der Maus über den Listenblock fährt:
< P Klasse = „text-center text-xl font-bold“ >Bewegen Sie den Cursor über den Listenblock, um den Markierungsstil zu ändern< / P >
< br >
< div Klasse = „flex justify-center space-x-20 bg-slate-100 abgerundet-lg mx-4 p-2“ >
< ul Klasse = „list-disc hover:list-decimal“ >
AUFFÜHREN # 1
< Das >Dies ist der erste Artikel< / Das >
< Das >Dies ist der zweite Punkt< / Das >
< Das >Dies ist der dritte Punkt< / Das >
< / ul >
< / div >Im obigen Code wird die Liste mit dem „ Listen-Disc ”-Klasse als Standard-Listenstiltyp. Allerdings verwendet man „ hover:list-decimal ”-Klasse wird der Listenstiltyp geändert, wenn der Benutzer den Mauszeiger über den Listenblock bewegt.
Ausgabe:
Die folgende Ausgabe zeigt, dass sich der Stil des Listentyps von einer Liste mit Aufzählungszeichen in eine nummerierte Liste ändert, wenn der Cursor über dem Listenblock steht.
Verwenden der List Style-Klasse mit den Haltepunkten in Tailwind
Haltepunkte werden für die responsive Gestaltung des Layouts für verschiedene Bildschirmgrößen verwendet. Die fünf von Tailwind bereitgestellten Standardhaltepunkte sind sm, md, lg, xl und 2xl. Um der Listentyp-Stilklasse einen Haltepunkt bereitzustellen, wird die folgende Syntax verwendet:
< ul Klasse = „{breakpoint}:list-{style}…“ > < / ul >Hier ist ein Beispiel für die Verwendung des Listenstiltyps mit einem „ md ”-Haltepunkt, an dem sich der Markierungsstil ändert, wenn die Bildschirmgröße den „md“-Haltepunkt erreicht:
< P Klasse = „text-center text-xl font-bold“ >Bildschirm vergrößern Größe um den Markierungsstil zu ändern< / P >
< br >
< div Klasse = „flex justify-center space-x-20 bg-slate-100 abgerundet-lg mx-4 p-2“ >
< ul Klasse = „list-disc md:list-decimal“ >
AUFFÜHREN # 1
< Das >Dies ist der erste Artikel< / Das >
< Das >Dies ist der zweite Punkt< / Das >
< Das >Dies ist der dritte Punkt< / Das >
< / ul >
< / div >Im obigen Code wird die Liste mit dem „ Listen-Disc ”-Klasse als Standardstil. Allerdings verwendet man „ md:list-decimal ”-Klasse ändert sich der Listenstiltyp für die Bildschirmgröße „md“.
Ausgabe:
Wie Sie in der folgenden Ausgabe sehen können, ändert sich der Listenstiltyp von „Disc“ zu „Decimal“, wenn die Bildschirmgröße „ md ” Haltepunkt.
Dabei geht es darum, den Listenstiltyp in Tailwind festzulegen.
Abschluss
Tailwind bietet drei vordefinierte Listenstil-Typklassen zum Ändern des Auflistungsstils eines Elements. Der ' Listen-Disc Die Klasse „stellt die Aufzählungspunkte für die Auflistung der Elemente bereit. Der ' Listendezimalzahl Die Klasse „“ stellt die Nummern zum Auflisten der Elemente bereit. Der ' list-none Die Klasse „erstellt eine Liste, die keine Elementmarkierung verwendet. In diesem Artikel wird das Verfahren zum Festlegen des Listenstiltyps in Tailwind beschrieben.