Supponiamo che un utente debba creare un elenco di elementi per la propria pagina Web. Per semplificare il processo di progettazione, Tailwind fornisce varie classi in stile elenco che possono essere utilizzate per modificare il tipo, la posizione e l'allineamento degli elementi dell'elenco.
Questo articolo fornirà la procedura per impostare il tipo di stile dell'elenco in Tailwind.
Come impostare il tipo di stile elenco in Tailwind?
Tailwind fornisce tre tipi di stili di elenco predefiniti. Sono utilizzati per fornire il “ marcatore ' per gli elementi dell'elenco. Le tre classi di tipi di stile di elenco predefinite sono descritte come segue:
- disco-elenco: Questa classe fornirà i punti elenco rotondi come indicatore dell'elenco.
- lista-decimale: Questa classe fornirà i numeri decimali come indicatore dell'elenco.
- lista-nessuno: Questa classe rimuoverà tutti gli indicatori di elenco dagli elementi.
La sintassi per utilizzare i tipi di stile elenco è la seguente:
< ul classe = 'lista-{stile}' > < / ul >
Per una migliore comprensione, la dimostrazione fornita di seguito utilizzerà la sintassi sopra definita per fornire diversi stili di marcatori per elencare gli elementi. In questo esempio, verranno creati tre elementi di elenco e forniti con i diversi stili di indicatore utilizzando le classi di stile di elenco predefinite in Tailwind:
< P classe = 'testo-centro testo-xl carattere-grassetto' >Elenco diverso predefinito Stile Tipi in Tailwind< / P >
< fratello >
< div classe = 'flex giustifica-center space-x-20 bg-slate-100 arrotondato-lg mx-4 p-2' >
< ul classe = 'elenco-disco' >
ELENCO # 1
< Quello >Questo è il primo elemento< / Quello >
< Quello >Questo è il secondo elemento< / Quello >
< Quello >Questo è il terzo elemento< / Quello >
< / ul >
< ul classe = 'lista-decimale' >
ELENCO # 2
< Quello >Questo è il primo elemento< / Quello >
< Quello >Questo è il secondo elemento< / Quello >
< Quello >Questo è il terzo elemento< / Quello >
< / ul >
< ul classe = 'elenco-nessuno' >
ELENCO # 3
< Quello >Questo è il primo elemento< / Quello >
< Quello >Questo è il secondo elemento< / Quello >
< Quello >Questo è il terzo elemento< / Quello >
< / ul >
< / div >
La spiegazione del codice sopra è la seguente:
- UN ' L'elemento ' viene creato con un ' XL ' dimensione del carattere e un ' grassetto 'peso del carattere. Il contenuto testuale dell'elemento viene posizionato al centro utilizzando il simbolo “ centro-testo ' classe.
- Dopo un'interruzione di riga, un ' L'elemento ' viene creato e gli viene fornito un elemento ' flettere ' classe. Questo creerà un contenitore che allineerà gli elementi figlio orizzontalmente.
- IL ' giustifica-centro La classe posizionerà gli oggetti al centro del contenitore.
- IL ' spazio-x-{dimensione} La classe ' fornisce lo spazio orizzontale tra gli elementi.
- IL ' bg-{colore}-{numero} La classe 'imposta lo sfondo del contenitore sul colore specificato.
- IL ' arrotondato-lg ” rende gli angoli del contenitore arrotondati.
- IL ' mx-4 La classe ' fornisce il margine orizzontale al contenitore flessibile.
- IL ' p-2 ' fornisce il riempimento al contenitore flessibile.
- Successivamente, vengono creati tre elementi dell'elenco a cui vengono forniti diversi tipi di stile dell'elenco utilizzando il comando ' lista-{tipo} ' classe.
Produzione:
Dall'output seguente, si può vedere che il primo elenco utilizza punti elenco, il secondo utilizza numeri decimali e il terzo non utilizza alcun indicatore di elemento.
Utilizzo della classe di stile elenco con le varianti di stato in Tailwind
La classe di stile elenco può essere utilizzata con le varianti di stato predefinite in Tailwind per rendere la progettazione più dinamica. Utilizzando le varianti al passaggio del mouse, focus e stato attivo, l'utente può modificare lo stile del marcatore degli elementi dell'elenco ogni volta che viene attivato lo stato specificato. La sintassi per utilizzare la classe di stile elenco con varianti di stato è la seguente:
< ul classe = '{stato}:list-{stile}...' > < / ul >Ecco un esempio di utilizzo del tipo di stile elenco con uno stato 'al passaggio del mouse', in cui l'utente può modificare lo stile del marcatore passando il mouse sul blocco elenco:
< P classe = 'testo-centro testo-xl carattere-grassetto' >Passa il cursore sul blocco elenco per modificare lo stile del marcatore< / P >
< fratello >
< div classe = 'flex giustifica-center space-x-20 bg-slate-100 arrotondato-lg mx-4 p-2' >
< ul classe = 'list-disc al passaggio del mouse:list-decimal' >
ELENCO # 1
< Quello >Questo è il primo elemento< / Quello >
< Quello >Questo è il secondo elemento< / Quello >
< Quello >Questo è il terzo elemento< / Quello >
< / ul >
< / div >Nel codice precedente, l'elenco è fornito con il ' elenco-disco ' come tipo di stile di elenco predefinito. Tuttavia, utilizzando il “ hover:elenco-decimale ', il tipo di stile dell'elenco verrà modificato quando l'utente posiziona il cursore del mouse sul blocco dell'elenco.
Produzione:
L'output seguente mostra che lo stile del tipo di elenco cambia da elenco puntato a elenco numerato quando il cursore passa sopra il blocco elenco.
Utilizzo della classe di stile elenco con i punti di interruzione in Tailwind
I punti di interruzione vengono utilizzati per la progettazione reattiva del layout per diverse dimensioni dello schermo. I cinque punti di interruzione predefiniti forniti da Tailwind sono sm, md, lg, xl e 2xl. La seguente sintassi viene utilizzata per fornire un punto di interruzione alla classe di stile del tipo elenco:
< ul classe = '{punto di interruzione}:list-{stile}...' > < / ul >Ecco un esempio di utilizzo del tipo di stile elenco con un ' md ' punto di interruzione, dove lo stile del marcatore cambierà quando la dimensione dello schermo raggiunge il punto di interruzione 'md':
< P classe = 'testo-centro testo-xl carattere-grassetto' >Aumenta schermo Misurare per cambiare stile indicatore< / P >
< fratello >
< div classe = 'flex giustifica-center space-x-20 bg-slate-100 arrotondato-lg mx-4 p-2' >
< ul classe = 'lista-disco md:lista-decimale' >
ELENCO # 1
< Quello >Questo è il primo elemento< / Quello >
< Quello >Questo è il secondo elemento< / Quello >
< Quello >Questo è il terzo elemento< / Quello >
< / ul >
< / div >Nel codice precedente, l'elenco è fornito con il ' elenco-disco ' come stile predefinito. Tuttavia, utilizzando il “ md:lista-decimale ', il tipo di stile dell'elenco cambierà per la dimensione dello schermo 'md'.
Produzione:
Come puoi vedere nell'output seguente, il tipo di stile dell'elenco cambia da disco a decimale quando la dimensione dello schermo raggiunge ' md ' punto di rottura.
Si tratta di impostare il tipo di stile elenco in Tailwind.
Conclusione
Tailwind fornisce tre classi di tipo di stile di elenco predefinite per modificare lo stile di elenco di un elemento. IL ' elenco-disco ' fornisce i punti elenco per elencare gli elementi. IL ' lista-decimale ' fornisce i numeri per elencare gli articoli. IL ' elenco-nessuno La classe ' crea un elenco che non utilizza alcun indicatore di elemento. Questo articolo ha fornito la procedura per impostare il tipo di stile dell'elenco in Tailwind.