Questo articolo spiegherà come utilizzare le frazioni diagonali in Tailwind.
Come utilizzare le frazioni diagonali nei CSS Tailwind?
La classe della frazione diagonale in Tailwind è una variante di carattere numerico predefinito che riduce il numeratore e il denominatore e li separa da una barra. Ciò fa sì che il numero della frazione sembri distintivo rispetto al resto del testo.
Sintassi
La sintassi dell'utilizzo di ' frazioni diagonali 'la classe è la seguente:
< div classe = 'frazioni diagonali' >
< div / >
Come puoi vedere dalla sintassi sopra, lo sviluppatore deve fornire ' frazioni diagonali ' nel ' classe 'attributo dell'elemento.
Usiamo la classe “diagonal-fractions” come esempio pratico. Nella dimostrazione seguente, l'utente può vedere la differenza tra le frazioni normali e le frazioni diagonali:
< div classe = 'bg-slate-200 centro testo testo-lg' >< P >Frazioni normali: 3 / 5 6 / 3 6 / 5 < / P >
< P classe = 'frazioni diagonali' >Frazioni diagonali: 3 / 5 6 / 3 6 / 5 < / P >
< / div >
La spiegazione del codice sopra è la seguente:
- IL ' div L'elemento ' viene creato e fornito come colore di sfondo utilizzando l'elemento ' bg-{colore}-{numero} ' classe.
- Quindi, al testo viene fornito un carattere di grandi dimensioni e viene allineato al centro dell'elemento utilizzando il pulsante ' testo-lg ' E ' centro-testo ' classi rispettivamente.
- Successivamente, due “ vengono creati gli elementi ', dove il secondo è provvisto del ' frazioni diagonali ' classe.
Produzione:
La differenza tra la frazione diagonale e la frazione normale può essere chiaramente vista nell'output sopra.
Utilizzo della classe di frazione diagonale con punti di interruzione
I punti di interruzione vengono utilizzati come query multimediali in Tailwind. Sono disponibili cinque punti di interruzione predefiniti con larghezze minime specificate. Questi punti di interruzione possono essere utilizzati con qualsiasi classe in Tailwind per creare layout di progettazione reattivi e dinamici.
Per utilizzare il ' frazioni diagonali ' con un punto di interruzione in Tailwind, viene utilizzata la seguente sintassi:
{ prefisso del punto di interruzione } : frazione diagonaleLa tabella seguente fornisce la larghezza minima per diversi punti di interruzione in Tailwind:
| Prefisso del punto di interruzione | Larghezza minima |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| XL | 1280px |
| 2xl | 1536px |
Usiamo i punti di interruzione con ' frazioni diagonali ” per comprenderne praticamente l'utilizzo:
< div classe = 'bg-slate-200 text-center text-lg md:frazioni-diagonali' >3/4, 7/8, 5/4, 6/5
< / div >
Nel codice sopra fornito, un elemento div è fornito nel ' md:frazioni-diagonali ' classe che cambierà il carattere delle frazioni numeriche quando il ' md ' viene raggiunto il punto di interruzione.
Produzione
Come puoi vedere nell'output, i numeri frazionari vengono forniti con il carattere della frazione diagonale quando ' md viene raggiunto il punto di interruzione:
Utilizzo della classe della frazione diagonale con gli stati Tailwind
Tailwind fornisce il valore predefinito ' stati ' per fornire proprietà di progettazione a un elemento quando viene attivato quello stato specifico. Ciò rende il layout del design più accattivante e dinamico. Per utilizzare la classe “diagonal-fractions” con uno stato in Tailwind, viene utilizzata la seguente sintassi:
{ stato } : frazione diagonaleLo stato predefinito fornito da Tailwind è il seguente:
- Passa il mouse: Quando l'utente posiziona il cursore sull'elemento.
- Messa a fuoco: Quando l'utente si concentra su un elemento navigando verso di esso.
- Attivo: Quando l'utente attiva un elemento facendo clic su di esso.
- Disattivare: Quando all'utente non è consentito attivare un elemento.
La dimostrazione seguente fornisce un esempio pratico dell'utilizzo del comando ' frazioni diagonali 'classe con il' passa il mouse ' affermano in Tailwind:
< div classe = 'bg-slate-200 text-center text-lg hover:frazioni-diagonali' >3/4, 7/8, 5/4, 6/5
< / div >
IL ' div L'elemento ' nel codice precedente è fornito da un ' hover:frazioni-diagonali ' che cambierà il carattere normale dei numeri delle frazioni nel carattere della frazione diagonale.
Produzione
Come puoi vedere nell'output, il carattere numerico del numero della frazione cambia quando l'utente posiziona il cursore del mouse su di esso:
Si tratta dell'utilizzo della classe della frazione diagonale in Tailwind CSS.
Conclusione
Per utilizzare le frazioni diagonali in Tailwind CSS, utilizzare il comando ' frazione diagonale ' classe. Questa classe separerà il numeratore e il denominatore con una barra e li renderà piccoli. Gli utenti possono anche utilizzare la classe 'frazioni diagonali' con i punti di interruzione e gli stati predefiniti in Tailwind per rendere il progetto più dinamico. Questo articolo ha fornito la procedura per utilizzare le frazioni diagonali in Tailwind.