Dit artikel beschrijft de procedure voor het toepassen van de eigenschap Minimale hoogte op Hover, Focus en andere staten in Tailwind.
Opmerking: Lees dit voor meer informatie over de minimumhoogteklassen in Tailwind artikel op onze website.
Hoe kan ik een minimale hoogte-eigenschap toepassen op hover, focus en andere staten in Tailwind?
Tailwind biedt standaard statusvarianten die kunnen worden voorzien van de ontwerpeigenschappen. Deze statusvarianten omvatten ‘hover’, ‘focus’ en ‘actief’. De omschrijving van deze staatsvarianten luidt als volgt:
- De' zweven De status wordt geactiveerd wanneer de muiscursor over een element beweegt.
- De ' focus De status wordt geactiveerd wanneer het element scherp in beeld is.
- De ' actief De status wordt geactiveerd wanneer het element wordt geactiveerd of erop wordt geklikt.
Laten we de eigenschap minimale hoogte één voor één gebruiken voor elk van deze toestanden.
Minimale hoogte-eigenschap gebruiken met hoverstatus
Om gebruik te maken van de “ minimale hoogte ”-klasse met een hover-statusvariant in Tailwind, wordt de volgende syntaxis gebruikt:
< div klas = 'hover:min-h-{grootte}...' > < / div >
Laten we de hierboven gedefinieerde syntaxis in een demonstratie gebruiken. In dit voorbeeld verhogen we de minimale hoogte van een element telkens wanneer de muiscursor over het element beweegt.
< div klas = 'min-h-fit afgerond-md bg-blauw-700 tekst-midden tekst-wit hover:min-h-scherm' >Beweeg de muisaanwijzer om het minimum te verhogen hoogte < / div >De uitleg van de bovenstaande code is als volgt:
- De ' min-w-pasvorm ” class stelt de minimale hoogtelimiet in op de hoogte die het div-element nodig heeft om bij de inhoud te passen.
- De ' hover:min-w-scherm ”-klasse biedt een minimale hoogtelimiet die gelijk is aan 100% van de schermgrootte.
- De ' afgerond-md ', ' bg-{kleur}-{nummer} ', ' tekst-centrum ', En ' tekst-wit ”-klassen zijn respectievelijk verantwoordelijk voor afgeronde hoeken, achtergrondkleur, gecentreerde tekst en witte tekstkleur voor het div-element. de hoeken van het div-element afgerond.
Uitgang:
Uit de onderstaande uitvoer blijkt duidelijk dat de minimale hoogte van het element toeneemt tot 100% van de schermgrootte als de muiscursor erover beweegt.
Minimale hoogte-eigenschap gebruiken met focusstatus
Om gebruik te maken van de “ minimale hoogte ”-klasse met de focusstatus in Tailwind, wordt de volgende syntaxis gebruikt:
< div klas = 'focus:min-h-{grootte}...' > < / div >Laten we de hierboven gedefinieerde syntaxis in een demonstratie gebruiken. In dit voorbeeld zal de minimale hoogte van een invoerveld toenemen als de gebruiker erop focust.
< invoer tijdelijke aanduiding = 'Focus op dit invoerveld' klas = 'min-h-0 h-fit w-48 afgerond-md bg-grijs-200 tekst-midden focus:min-h-[35%]' >< / invoer >De uitleg van de bovenstaande code is als volgt:
- Een ' invoer ”-veld wordt gemaakt met wat tekst in het placeholder-attribuut.
- Er is een minimale hoogtelimiet van 0px voorzien met behulp van de “ min-u-0 ' klas. Dus stelde de ontwikkelaar de standaardhoogte van het element in op de hoogte die nodig is om in de inhoud te passen met behulp van de optie “ h-pasvorm ' klas.
- De ' focus:min-u-[35%] ”-klasse verhoogt de minimale hoogtelimiet van het invoerveld wanneer de gebruiker zich erop concentreert.
Uitgang:
Uit de onderstaande uitvoer blijkt duidelijk dat de hoogte van het invoerveld toeneemt naarmate de gebruiker zich erop concentreert. Dit komt omdat de minimale hoogtelimiet toeneemt van 0px naar 35% van de schermhoogte.
Minimale hoogte-eigenschap gebruiken met actieve status in rugwind
Om gebruik te maken van de “ minimale hoogte ”-eigenschap met de actieve statusvariant in Tailwind, wordt de volgende syntaxis gebruikt:
< div klas = 'actief:min-h-{grootte}...' > < / div >Laten we de hierboven gedefinieerde syntaxis in een demonstratie gebruiken. In dit voorbeeld wordt de minimale hoogte van de knop groter als de gebruiker er actief op klikt.
< knop klas = 'min-h-0 h-fit w-48 afgerond-md bg-blauw-300 tekst-midden actief:min-h-[35%]' > Klik om te vergroten Hoogte < / knop >Er wordt een knop gemaakt met een minimale hoogtelimiet van 0px. Echter, met behulp van de “ actief:min-u-[35%] ”de minimale hoogtelimiet wordt verhoogd van 0px naar 35% van de schermgrootte wanneer op de knop wordt geklikt.
Uitgang:
In de volgende uitvoer is te zien dat de minimale hoogte van de knop toeneemt wanneer de gebruiker erop klikt.
Dat gaat allemaal over het toepassen van de minimale hoogte-eigenschap op Tailwind-hover, focus en de andere staten in Tailwind.
Conclusie
Met de statusvarianten zoals hover, focus en active in Tailwind kunnen gebruikers dynamische ontwerplay-outs creëren. Om de minimale hoogteklasse te gebruiken bij staatsvarianten in Tailwind, moet de “ hover:min-h-{waarde} ', ' focus:min-h-{waarde} ', En ' actief:min-h-{waarde} Er worden lessen gebruikt. In dit artikel wordt de procedure beschreven voor het toepassen van hover-, focus- en andere statussen met de minimale hoogteklasse in Tailwind.