CSS tilbyder en række rammer for programmører til at designe dynamiske websider. Det er mere sympatisk, fordi det giver alle vigtige funktioner og værktøjer på ét sted. Så du behøver ikke bruge andre rammer. Tailwind-rammen i CSS er den mest udbredte, fordi den sparer tid for brugeren at skrive overdreven CSS.
Denne guide giver dig mulighed for at bruge hover, fokus og andre tilstande i Tailwind.
Hvordan bruger man hover, fokus og andre stater i medvind?
Når man designer websider, er det nødvendigt at tilføje dynamiske og attraktive elementer for at opretholde interaktivitet med brugerne. Funktionerne i Tailwind kan bruges til at skabe interaktive og dynamiske sider uden at skrive yderligere tilpasset CSS. Nogle funktioner er 'hover', 'fokus' og 'aktiv', som hjælper med at tilføje tiltrækning til design.
Brug af Hover Variant i HTML
Svæveegenskaben bruges til at style et HTML-element, når brugeren flytter musemarkøren hen over et bestemt element. Det hjælper med at præsentere en glat oplevelse.
Trin 1: Anvend 'hover'-egenskaben i HTML
Opret en HTML-fil, og anvend hover-egenskaben til et element i koden. For at få en idé, tag et kig på koden nedenfor:
< legeme >
< div klasse = 'centrum' >
< knap klasse = 'bg-green-500 hover:bg-blue-500 tekst-hvid skrifttype-fed afrundet' >
Svæv mig!
< / knap >
< / div >
< / legeme >
I denne kode:
- En knap med navnet ' Svæv mig! ” oprettes af knappen tag.
- “ bg-grøn-500 ” indstiller knappens baggrundsfarve til grøn.
- “ hover: bg-blue-500 ” ændrer knapfarven fra grøn til blå, når musen føres hen over den.
- Teksten i knappen har hvid farve ' tekst-hvid ' og ' skrifttype-fed ” gør skrifttypen fed.
- Knappens form er indstillet til at runde af ' afrundet '.
Trin 2: Se et eksempel på outputtet
Efter at have udført ovenstående kode, ser den endelige visning sådan ud:
Det kan ses, at knappen skifter farve, når musemarkøren flyttes hen over den.
Brug af fokusvariant i HTML
Focus-egenskaben bruges til at style HTML-elementer sådan, at når brugeren klikker på elementet, fremhæves det for at få brugerens opmærksomhed.
Trin 1: Anvend fokusegenskaben i HTML-koden
Opret en HTML-fil og anvend fokusegenskaben på et ønsket element. For at få et indtryk skal du overveje koden nedenfor:
< div >
< / div >
< / legeme >
I denne kode:
- Det ' bøje ” klasse skaber en flex.
- Det ' retfærdiggøre-center ” retfærdiggør indholdsjusteringen til midten.
- Det ' varecenter ” klasse justerer objekterne til midten af skærmen.
- Det ' h-skærm ” indstiller skærmstørrelsen i henhold til visningsporten.
- “ bg-blå-200 ” indstiller baggrundsfarven til blå.
- Der oprettes et inputfelt med typetekst.
- Det ' fokus: bg-grøn-300 ” ændrer inputfeltets farve til grøn, når brugeren klikker på den.
- “ w-64 ” indstiller bredden til 64px.
- “ h-10 ” indstiller højden til 10px.
- “ px-4 ” tilføjer en polstring på 4px til toppen og venstre side.
- “ py-2 ” tilføjer en polstring på 2px til toppen og bunden.
Trin 2: Se forhåndsvisning af fokusegenskaben
Gem HTML-koden, og åbn den webside, der er oprettet af den. Flyt derefter markøren på inputboksen og klik på den, og nedenstående ændring vil ske:
Brug af den aktive variant i HTML
Denne egenskab bruges til at style elementer til betingelsen, når brugeren dynamisk trykker på elementet. Den aktive tilstand er tidsperioden fra aktiveringsstadiet af markøren og dens frigivne tilstand.
Syntaks
aktiv: { ejendom }Den specifikke CSS-egenskab bliver anvendt på det valgte element.
Trin 1: Anvend den aktive variant i HTML-koden
Opret en HTML-fil og anvend den aktive egenskab til et element, som i nedenstående tilfælde er en knap:
< div klasse = 'flex justify-center items-center h-screen' >
< knap klasse = 'bg-green-600 p-4 rounded-md transition-transform duration-400 transform active:scale-110' >
Klik på MIG!
< / knap >
< / div >
< / legeme >
I denne kode:
- “ bg-grøn-600 ” indstiller baggrundsfarven til grøn.
- “ s-4 ” tilføjer en polstring på 4px.
- “ afrundet-md ” gør knapformen afrundet.
- “ overgang-transform ' bruges til at transformere knappen i en kort periode, som indstilles af ' varighed-400 transformation '.
- Det ' aktiv:skala-110 ” forvandler knappen til en større størrelse.
Trin 2: Se et eksempel på outputtet
Gem ovenstående kode i en HTML-fil, og se et eksempel på den webside, der er oprettet af den. Websiden vil se ud som:
Det kan ses, at knapstørrelsen øges, når musen holder den, og så snart den slippes, vender den tilbage til sin oprindelige tilstand.
Konklusion
For at bruge hover, fokus og andre tilstande i Tailwind, skal du bruge de foruddefinerede tilstandsklasser som 'hover' og anvende nogle stilegenskaber på det, såsom at ændre farve, oprette en fokusring og så videre. Displayværktøjerne bruges til at præsentere et skalerbart output. Denne opskrivning har demonstreret metoden til at bruge hover, fokus og andre tilstande i Tailwind.