Questo articolo fornirà la procedura per applicare la proprietà di altezza minima a Hover, Focus e altri stati in Tailwind.
Nota: Per saperne di più sulle classi di altezza minima in Tailwind, leggi questo articolo sul nostro sito web.
Come applicare la proprietà altezza minima al passaggio del mouse, al focus e ad altri stati in Tailwind?
Tailwind fornisce varianti di stato predefinite che possono essere fornite con le proprietà di progettazione. Queste varianti di stato includono “hover”, “focus” e “attivo”. La descrizione di queste varianti di stato è la seguente:
- IL' passa il mouse Lo stato ' viene attivato ogni volta che il cursore del mouse passa sopra un elemento.
- IL ' messa a fuoco Lo stato ' viene attivato ogni volta che l'elemento è a fuoco.
- IL ' attivo Lo stato viene attivato ogni volta che l'elemento viene attivato o cliccato.
Usiamo la proprietà altezza minima con ciascuno di questi stati uno per uno.
Utilizzo della proprietà Altezza minima con lo stato al passaggio del mouse
Per utilizzare il ' altezza minima ' con una variante dello stato hover in Tailwind, viene utilizzata la seguente sintassi:
< div classe = 'passa il mouse:min-h-{dimensione}...' > < / div >
Usiamo la sintassi sopra definita in una dimostrazione. In questo esempio, aumenteremo l'altezza minima di un elemento ogni volta che il cursore del mouse passa sopra l'elemento.
< div classe = 'min-h-fit arrotondato-md bg-blu-700 testo-centro testo-bianco al passaggio del mouse: min-h-schermo' > Passa con il mouse per aumentare il minimo altezza < / div >La spiegazione del codice sopra è la seguente:
- IL ' min-w-fit La classe 'imposta il limite di altezza minimo sull'altezza richiesta dall'elemento div per adattarsi al suo contenuto.
- IL ' passa il mouse:min-w-schermo ” fornirà un limite minimo di altezza pari al 100% della dimensione dello schermo.
- IL ' arrotondato-md ', ' bg-{colore}-{numero} ', ' centro-testo ', E ' testo-bianco Le classi ' sono responsabili rispettivamente degli angoli arrotondati, del colore di sfondo, del testo allineato al centro e del colore del testo bianco per l'elemento div. gli angoli dell'elemento div arrotondati.
Produzione:
È chiaro dall'output seguente che l'altezza minima dell'elemento aumenta al 100% della dimensione dello schermo quando il cursore del mouse passa sopra di esso.
Utilizzo della proprietà Altezza minima con stato di messa a fuoco
Per utilizzare il ' altezza minima ' con lo stato focus in Tailwind, viene utilizzata la seguente sintassi:
< div classe = 'focus:min-h-{dimensione}...' > < / div >Usiamo la sintassi sopra definita in una dimostrazione. In questo esempio, l'altezza minima di un campo di input aumenterà quando l'utente si concentra su di esso.
< ingresso segnaposto = 'Concentrarsi su questo campo di input' classe = 'min-h-0 h-fit w-48 arrotondato-md bg-grigio-200 messa a fuoco centrale del testo:min-h-[35%]' >< / ingresso >La spiegazione del codice sopra è la seguente:
- UN ' ingresso Il campo ' viene creato con del testo nell'attributo segnaposto.
- È previsto un limite minimo di altezza pari a 0px utilizzando il comando “ min-h-0 ' classe. Pertanto, lo sviluppatore ha impostato l'altezza predefinita dell'elemento uguale all'altezza richiesta per adattarsi al contenuto utilizzando il comando ' h-fit ' classe.
- IL ' messa a fuoco:min-h-[35%] ' aumenterà il limite minimo di altezza del campo di input quando l'utente si concentra su di esso.
Produzione:
È chiaro dall'output seguente che l'altezza del campo di input aumenta man mano che l'utente si concentra su di esso. Questo perché il limite di altezza minima aumenta da 0px al 35% dell'altezza dello schermo.
Utilizzo della proprietà Altezza minima con stato attivo in Tailwind
Per utilizzare il ' altezza minima ' con la variante dello stato attivo in Tailwind, viene utilizzata la seguente sintassi:
< div classe = 'attivo:min-h-{dimensione}...' > < / div >Usiamo la sintassi sopra definita in una dimostrazione. In questo esempio, l'altezza minima del pulsante aumenterà quando l'utente fa clic attivamente su di esso.
< pulsante classe = 'min-h-0 h-fit w-48 arrotondato-md bg-blu-300 testo-centro attivo:min-h-[35%]' > Fare clic per aumentare Altezza < / pulsante >Viene creato un pulsante con un limite di altezza minimo di 0 px. Tuttavia, utilizzando il “ attivo:min-h-[35%] ' il limite di altezza minima aumenterà da 0px al 35% delle dimensioni dello schermo ogni volta che si fa clic sul pulsante.
Produzione:
Nell'output seguente si può vedere che l'altezza minima del pulsante aumenta quando l'utente fa clic su di esso.
Si tratta di applicare la proprietà di altezza minima al passaggio del mouse, alla messa a fuoco e agli altri stati di Tailwind.
Conclusione
Le varianti di stato come passaggio del mouse, messa a fuoco e attivo in Tailwind consentono agli utenti di creare layout di progettazione dinamici. Per utilizzare la classe di altezza minima con le varianti di stato in Tailwind, il ' passaggio del mouse:min-h-{valore} ', ' focus:min-h-{valore} ', E ' attivo:min-h-{valore} vengono utilizzate le classi. Questo articolo ha fornito la procedura per applicare il passaggio del mouse, lo stato attivo e altri stati con la classe di altezza minima in Tailwind.