Den här artikeln illustrerar användningen av hovring, fokus och andra tillstånd med positionsegenskaper i Tailwind.
Hur man använder Hover, Focus och andra stater med positionsfastighet i medvind?
Hover, fokus och andra tillstånd i Tailwind används för att utforma element i Tailwind som presenterar ett attraktivt och användarvänligt gränssnitt och engagerande upplevelse för användarna. Ibland ska positionsegenskapen användas för att upprätthålla upplevelsen till dess högsta standard.
Metod 1: Använda hovringsvariant med positionsegenskap
Hover-varianten används för att utforma valda element när användaren flyttar markören över det valda elementet. den ' placera ' attribut kan användas tillsammans med ' sväva ” för att ställa in positionen före och efter hovringen. Detta par används för att skapa en engagerande upplevelse för användaren.
Steg 1: Lägg till egenskapen Hover med position i HTML
I koden nedan tillämpas hovringsegenskapen längs positionsegenskapen på ' knapp ' element:
< kropp >
< knapp klass = 'relative w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< sid klass = 'text-vit text-center' > Hover Me < / sid >
< / knapp >
< / kropp >
I denna kod:
- den ' relativ ” klass ställer in knappen i förhållande till den överordnade sidan.
- ' w-40 ” ställer in bredden till 40px.
- ' h-12 ” ställer in höjden till 12px.
- ' bg-blå-500 ” ställer in bakgrundsfärgen till blå.
- ' sväva: absolut ” ändrar knappens relativa position till absolut när muspekaren flyttas över den.
- ' hover: translate-x-4 ' flyttar knappen 4px till höger på x-axeln och samtidigt 4px nedåt med ' sväva: translate-y-4 ”.
- Texten är mittjusterad med ' text-center ”.
Steg 2: Verifiering
Förhandsgranska webbsidan som skapats av ovanstående kod, som ser ut så här:
Utdata visar att elementet har flyttats åt höger och nedåt med 4px.
Metod 2: Använd fokusvariant med positionsegenskap
Fokusvarianten används för att utforma HTML-element för att få användarens uppmärksamhet och ge betoning på vissa element. Positionen kan också användas tillsammans för att placera objektet relativt eller absolut till den överordnade sidan. Det görs för att hålla användaren engagerad.
Steg 1: Lägg till Focus Property med Position i HTML
Skapa en HTML-fil och applicera fokusegenskapen med en lämplig position. Till exempel tillämpas relativ position på en inmatningsruta i koden nedan:
< / kropp >
I denna kod:
- Ställ in positionen för ' inmatning ' element till ' relativ ”.
- ' fokus: translate-x-4 ' flyttar knappen 4px till höger på x-axeln och samtidigt 4px nedåt med ' fokus: translate-y-4 ” när användaren klickar på inmatningsrutan.
- ' fokus: disposition-2 ” skapar en kontur runt textrutan när användaren klickar på den.
Steg 2: Verifiera utdata
Förhandsgranska webbsidan som skapats med kod för att se ändringen:
Ovanstående utdata visar att stilen har tillämpats på det valda elementet när det fokuseras.
Använda aktiv variant med positionsegenskap.
Den aktiva varianten används för att utforma HTML-elementen för att definiera tillståndet när användaren klickar och håller en knapp eller något annat element. Positionsegenskapen kan göra resultatet mer engagerande för användare som skapar en mer dynamisk upplevelse.
Steg 1: Lägg till egenskapen Hover med position i HTML
Skapa en HTML-fil och använd den aktiva varianten tillsammans med positionsegenskapen. Till exempel tillämpas dessa egenskaper på en knapp i nedanstående kodexempel:
< knapp klass = 'relative w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400' >
< spänna klass = 'text-vit' >Klicka på mig< / spänna >
< / knapp >
< / kropp >
I ovanstående kod:
- Ställ in positionen för ' knapp ' element till ' relativ ”.
- ' bg-blå-500 ” ställer in knappens bakgrundsfärg till blå.
- ' aktiv: translate-y-2 ' flyttar knappen 2px nedåt och ändrar knappens färg till grönt med ' aktiv: bg-green-400 ”.
Steg 2: Verifiera utdata
Förhandsgranska webbsidan som skapats av ovanstående kod och klicka och håll ned knappen för att se ändringen:
Ovanstående gif visar stilen för det valda knappelementet ändras när det blir aktivt.
Det är allt för att tillämpa svävningen, fokus och andra tillstånd med positionsegendom i Tailwind.
Slutsats
Hover, focus och andra tillstånd kan användas med positionsegenskapen genom att använda de fördefinierade klasserna av hover, focus och andra tillstånd och sedan tillämpa positionsklassattribut som ' absolut ', ' relativ ” och så vidare i samband. Den här bloggen har visat hur man använder hovring, fokus och andra tillstånd med positionsverktyget i Tailwind.