CSS erbjuder en mängd olika ramverk för programmerare att designa dynamiska webbsidor. Det är mer sympatiskt eftersom det ger alla viktiga funktioner och verktyg på ett ställe. Så du behöver inte använda andra ramverk. Tailwind-ramverket i CSS är det mest använda eftersom det sparar tid för användaren att skriva överdriven CSS.
Den här guiden beskriver användningen av hovring, fokus och andra tillstånd i Tailwind.
Hur man använder Hover, Focus och andra tillstånd i medvind?
När du designar webbsidor är det nödvändigt att lägga till dynamiska och attraktiva element för att upprätthålla interaktivitet med användarna. Funktionerna i Tailwind kan användas för att skapa interaktiva och dynamiska sidor utan att skriva ytterligare anpassad CSS. Vissa funktioner är 'hovra', 'fokus' och 'aktiv' som hjälper till att lägga till attraktion till design.
Använder Hover Variant i HTML
Hover-egenskapen används för att utforma ett HTML-element när användaren flyttar muspekaren över ett specifikt element. Det hjälper till att presentera en smidig upplevelse.
Steg 1: Använd egenskapen 'hover' i HTML
Skapa en HTML-fil och tillämpa hover-egenskapen på något element i koden. För att få en idé, ta en titt på koden nedan:
< kropp >
< div klass = 'Centrum' >
< knapp klass = 'bg-green-500 hover:bg-blue-500 text-white font-bold rounded' >
Sväva mig!
< / knapp >
< / div >
< / kropp >
I denna kod:
- En knapp som heter ' Sväva mig! ” skapas av knapptaggen.
- ' bg-grön-500 ” ställer in knappens bakgrundsfärg till grön.
- ' hover: bg-blue-500 ” ändrar knappfärgen från grön till blå när musen förs över den.
- Texten i knappen har vit färg ' text-vit ' och ' teckensnitt med fet stil ” gör typsnittet fetstilt.
- Knappens form är inställd på rund med ' avrundad ”.
Steg 2: Förhandsgranska utdata
Efter att ha kört ovanstående kod ser den slutliga vyn ut så här:
Det kan ses att knappen ändrar färg när muspekaren förs över den.
Använder fokusvariant i HTML
Focus-egenskapen används för att utforma HTML-element så att när användaren klickar på elementet markeras det för att få användarens uppmärksamhet.
Steg 1: Använd Focus Property i HTML-koden
Skapa en HTML-fil och tillämpa fokusegenskapen på något önskat element. För att få ett intryck överväg koden nedan:
< div >
< / div >
< / kropp >
I denna kod:
- den ' böja ” klass skapar en flex.
- den ' motivera-center ” motiverar innehållsjusteringen till mitten.
- den ' objekt-center ” klass justerar objekten till mitten av skärmen.
- den ' h-skärm ” ställer in skärmstorleken enligt visningsporten.
- ' bg-blå-200 ” ställer in bakgrundsfärgen till blå.
- En inmatningsruta med typtext skapas.
- den ' fokus: bg-green-300 ” ändrar inmatningsrutans färg till grönt när användaren klickar på det.
- ' w-64 ” ställer in bredden till 64px.
- ' h-10 ” ställer in höjden till 10px.
- ' px-4 ” lägger till en stoppning på 4px till toppen och vänster sida.
- ' py-2 ” lägger till en utfyllnad på 2px till toppen och botten.
Steg 2: Förhandsgranska fokusegenskapen
Spara HTML-koden och öppna webbsidan som skapats av den. Flytta sedan markören på inmatningsrutan och klicka på den och ändringen nedan kommer att ske:
Använda den aktiva varianten i HTML
Den här egenskapen används för att utforma element för villkoret när användaren dynamiskt trycker på elementet. Det aktiva tillståndet är tidsperioden från aktiveringsstadiet för markören och dess släppta tillstånd.
Syntax
aktiva: { fast egendom }Den specifika CSS-egenskapen tillämpas på det valda elementet.
Steg 1: Använd den aktiva varianten i HTML-koden
Skapa en HTML-fil och tillämpa den aktiva egenskapen på något element som i fallet nedan är en knapp:
< div klass = 'flex justify-center items-center h-screen' >
< knapp klass = 'bg-green-600 p-4 rounded-md transition-transform duration-400 transform active:scale-110' >
Klicka här!
< / knapp >
< / div >
< / kropp >
I denna kod:
- ' bg-grön-600 ” ställer in bakgrundsfärgen till grön.
- ' p-4 ” lägger till en utfyllnad på 4px.
- ' rundad-md ” gör knappformen rundad.
- ' övergång-förvandling ' används för att transformera knappen under en kort tidsperiod som ställs in av ' varaktighet-400 transform ”.
- den ' aktiv: skala-110 ” förvandlar knappen till en större storlek.
Steg 2: Förhandsgranska utdata
Spara ovanstående kod i en HTML-fil och förhandsgranska webbsidan som skapats av den. Webbsidan kommer att se ut som:
Det kan ses att knappstorleken ökar när musen håller den och så fort den släpps återgår den till sitt ursprungliga tillstånd.
Slutsats
För att använda hovring, fokus och andra tillstånd i Tailwind, använd de fördefinierade tillståndsklasserna som 'hovring' och tillämpa några stilegenskaper på det som att ändra färg, skapa en fokusring och så vidare. Displayverktygen används för att presentera en skalbar utdata. Den här uppskrivningen har visat metoden för att använda hovring, fokus och andra tillstånd i Tailwind.