Denne artikel vil give proceduren for at anvende minimumshøjdeegenskaber til Hover, Focus og andre stater i Tailwind.
Bemærk: For at vide mere om minimumshøjdeklasser i Tailwind, læs dette artikel på vores hjemmeside.
Hvordan anvender man min-højde-ejendom til at svæve, fokusere og andre stater i medvind?
Tailwind leverer standardtilstandsvarianter, der kan leveres med designegenskaberne. Disse tilstandsvarianter inkluderer 'hover', 'fokus' og 'aktiv'. Beskrivelsen af disse tilstandsvarianter er som følger:
- Det' svæve ” tilstand udløses, når musemarkøren svæver over et element.
- Det ' fokus ” tilstand udløses, når elementet er i fokus.
- Det ' aktiv ” tilstand udløses, når elementet aktiveres eller klikkes på.
Lad os bruge egenskaben for minimumshøjde med hver af disse tilstande én efter én.
Brug af ejendom med minimumshøjde med svævetilstand
For at bruge ' minimumshøjde ” klasse med en svævetilstandsvariant i Tailwind, bruges følgende syntaks:
< div klasse = 'hover:min-h-{størrelse}...' > < / div >
Lad os bruge den ovenfor definerede syntaks i en demonstration. I dette eksempel vil vi øge minimumshøjden af et element, når musemarkøren svæver over elementet.
< div klasse = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >Hover for at øge minimum højde < / div >Forklaringen af ovenstående kode er som følger:
- Det ' min-w-pasning ” klasse indstiller minimumshøjdegrænsen til den højde, der kræves af div-elementet for at passe til dets indhold.
- Det ' hover:min-w-skærm ” klasse vil give en minimumshøjdegrænse svarende til 100 % af skærmstørrelsen.
- Det ' afrundet-md ', ' bg-{color}-{number} ', ' tekst-center ', og ' tekst-hvid ” klasser er ansvarlige for henholdsvis afrundede hjørner, baggrundsfarve, centerjusteret tekst og hvid tekstfarve for div-elementet. hjørnerne af div-elementet afrundede.
Produktion:
Det fremgår tydeligt af nedenstående output, at elementets minimumshøjde stiger til 100% af skærmstørrelsen, når musemarkøren svæver over det.
Brug af egenskab med minimumshøjde med fokustilstand
For at bruge ' minimumshøjde ” klasse med fokustilstanden i Tailwind, bruges følgende syntaks:
< div klasse = 'focus:min-h-{størrelse}...' > < / div >Lad os bruge den ovenfor definerede syntaks i en demonstration. I dette eksempel vil minimumshøjden af et inputfelt øges, når brugeren fokuserer på det.
< input pladsholder = 'Fokuser på dette inputfelt' klasse = 'min-h-0 h-fit w-48 afrundet-md bg-grå-200 tekst-center fokus:min-h-[35%]' >< / input >Forklaringen af ovenstående kode er som følger:
- en ' input ”-feltet oprettes med noget tekst i pladsholderattributten.
- Det er givet en minimumshøjdegrænse på 0px ved hjælp af ' min-t-0 ' klasse. Så udvikleren indstillede standardhøjden på elementet lig med den højde, der kræves for at passe til indholdet ved hjælp af ' h-pasning ' klasse.
- Det ' fokus:min-t-[35 %] ” klasse vil øge minimumshøjdegrænsen for inputfeltet, når brugeren fokuserer på det.
Produktion:
Det fremgår tydeligt af nedenstående output, at højden af inputfeltet stiger, efterhånden som brugeren fokuserer på det. Dette skyldes, at minimumshøjdegrænsen stiger fra 0px til 35 % af skærmhøjden.
Brug af egenskab for minimumshøjde med aktiv tilstand i medvind
For at bruge ' minimumshøjde ” egenskab med den aktive tilstandsvariant i Tailwind, bruges følgende syntaks:
< div klasse = 'active:min-h-{størrelse}...' > < / div >Lad os bruge den ovenfor definerede syntaks i en demonstration. I dette eksempel vil minimumshøjden på knappen stige, når brugeren aktivt klikker på den.
< knap klasse = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > Klik for at øge Højde < / knap >Der oprettes en knap med en minimumshøjdegrænse på 0px. Men ved at bruge ' aktiv:min-t-[35 %] ” minimumshøjdegrænsen vil stige fra 0px til 35% af skærmstørrelsen, hver gang der trykkes på knappen.
Produktion:
Det kan ses i det følgende output, at knappens minimumshøjde stiger, når brugeren klikker på den.
Det handler om at anvende egenskaben minimumshøjde til Tailwind hover, fokus og de andre stater i Tailwind.
Konklusion
Tilstandsvarianterne såsom hover, focus og active i Tailwind giver brugerne mulighed for at skabe dynamiske designlayouts. For at bruge minimumshøjdeklassen med tilstandsvarianter i Tailwind, ' hover:min-h-{værdi} ', ' fokus:min-h-{værdi} ', og ' aktiv:min-t-{værdi} ” klasser bruges. Denne artikel har angivet proceduren for at anvende hover, fokus og andre tilstande med minimumshøjdeklassen i Tailwind.