Hur man ställer in liststilstypen i medvind

Anta att en användare måste skapa en lista med objekt för sin webbsida. För att göra designprocessen enklare tillhandahåller Tailwind olika liststilsklasser som kan användas för att ändra typ, position och justering av listelementen.

Den här artikeln kommer att tillhandahålla proceduren för att ställa in liststilstypen i Tailwind.

Hur ställer man in liststilstypen i medvind?

Tailwind tillhandahåller tre standardtyper för liststil. De används för att tillhandahålla ' markör ” stil för listobjekt. De tre standardklasserna för liststilstyp beskrivs enligt följande:

• list-skiva: Denna klass kommer att tillhandahålla de runda punkterna som listmarkör.
• list-decimal: Denna klass kommer att tillhandahålla decimaltalen som listmarkör.
• list-ingen: Den här klassen tar bort alla listmarkörer från objekten.

Syntaxen för att använda liststilstyperna är följande:

För bättre förståelse kommer den nedan tillhandahållna demonstrationen att använda den ovan definierade syntaxen för att tillhandahålla olika markörstilar för att lista objekt. I det här exemplet kommer tre listelement att skapas och förses med de olika markörstilarna med standardliststilsklasserna i Tailwind:

Förklaringen av ovanstående kod är följande:

• en '

  element skapas med en ' xl ' teckenstorlek och en ' djärv ” teckensnittsvikt. Textinnehållet i elementet placeras i mitten med hjälp av ' text-center ' klass.

• Efter en radbrytning visas en '
  '-element skapas och förses med ett ' böja ' klass. Detta kommer att skapa en behållare som kommer att rikta in de underordnade föremålen horisontellt.
• den ' motivera-center ” klass kommer att placera föremålen i mitten av behållaren.
• den ' mellanslag-x-{storlek} ” klass tillhandahåller det horisontella utrymmet mellan objekten.
• den ' bg-{color}-{number} ” klass ställer in bakgrunden för behållaren till den angivna färgen.
• den ' rundad-lg ” klass gör behållarens hörn rundade.
• den ' mx-4 ” klass tillhandahåller den horisontella marginalen till flexbehållaren.
• den ' p-2 ” klass ger stoppning till flexbehållaren.
• Därefter skapas tre listelement och förses med olika liststilstyper med hjälp av ' list-{typ} ' klass.

Produktion:

Från utgången nedan kan det ses att den första listan använder punktpunkter, den andra använder decimaltal och den tredje inte använder någon objektmarkör.

Använda liststilsklassen med tillståndsvarianter i medvind

Liststilsklassen kan användas med standardtillståndsvarianterna i Tailwind för att göra designen mer dynamisk. Genom att använda hovra, fokus och aktiva tillståndsvarianter kan användaren ändra markörstilen för listobjekten närhelst det angivna tillståndet utlöses. Syntaxen för att använda liststilsklassen med tillståndsvarianter är följande:

Här är ett exempel på att använda liststilstypen med ett 'hovring'-tillstånd, där användaren kan ändra markörstilen genom att hålla muspekaren över listblocket:

I ovanstående kod är listan försedd med ' list-skiva ” klass som standardtyp för liststil. Men med hjälp av ' hover:list-decimal ” klass, kommer liststilstypen att ändras när användaren för muspekaren över listblocket.

Produktion:

Utdata nedan visar att listtypsstilen ändras från en punktlista till en numrerad lista när markören svävar över listblocket.

Använda liststilsklassen med brytpunkterna i medvind

Brytpunkter används för responsiv design av layouten för olika skärmstorlekar. De fem standardbrytpunkterna som tillhandahålls av Tailwind är sm, md, lg, xl och 2xl. Följande syntax används för att förse listtypstilklassen med en brytpunkt:

Här är ett exempel på hur du använder liststilstypen med en ' md ' brytpunkt, där markörstilen ändras när skärmstorleken når 'md' brytpunkten:

I ovanstående kod är listan försedd med ' list-skiva ” klass som standardstil. Men med hjälp av ' md:list-decimal ” klass kommer liststilstypen att ändras för skärmstorleken ”md”.

Produktion:

Som du kan se i utgången nedan ändras liststilstypen från skiva till decimal när skärmstorleken når ' md ' brytpunkt.

Det handlar om att ställa in List Style Type i Tailwind.

Slutsats

Tailwind tillhandahåller tre fördefinierade liststilstypklasser för att ändra liststilen för ett element. den ' list-skiva ” klass ger punkterna för att lista objekten. den ' list-decimal ” klass ger numren för att lista objekten. den ' lista-ingen ” klass skapar en lista som inte använder någon objektmarkör. Den här artikeln har tillhandahållit proceduren för att ställa in liststilstypen i Tailwind.