Тази статия илюстрира използването на задържане, фокусиране и други състояния със свойства на позиция в Tailwind.
Как да използвате Hover, Focus и други състояния със свойство Position в Tailwind?
Ховърът, фокусът и други състояния в Tailwind се използват за стилизиране на елементи в Tailwind, представяйки атрактивен и удобен за потребителя интерфейс и ангажиращо изживяване за потребителите. Понякога свойството позиция трябва да се прилага, за да се поддържа изживяването до най-високите му стандарти.
Метод 1: Използване на вариант на задържане със свойство на позиция
Вариантът за задържане се използва за стилизиране на избрани елементи, когато потребителят премести курсора върху този избран елемент. „ позиция ” може да се използва заедно с „ завъртане ”, за да зададете позицията преди и след задържането. Тази двойка се използва за създаване на привлекателно изживяване за потребителя.
Стъпка 1: Добавете свойството Hover с позиция в HTML
В кода по-долу, свойството hover се прилага по протежение на свойството позиция върху „ бутон ” елемент:
< тяло >
< бутон клас = 'относително w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< стр клас = 'текст-бял център за текст' > Hover Me < / стр >
< / бутон >
< / тяло >
В този код:
- „ роднина ” клас задава бутона спрямо родителската страница.
- “ w-40 ” задава ширината на 40px.
- “ з-12 ” задава височината на 12px.
- “ bg-blue-500 ” задава цвета на фона на син.
- “ hover: абсолютен ” променя относителната позиция на бутона на абсолютна, когато курсорът на мишката се движи върху него.
- “ задържане: translate-x-4 ” премества бутона 4px надясно по оста x и в същото време 4px надолу с „ задържане: translate-y-4 ”.
- Текстът е подравнен в центъра с „ текстов център ”.
Стъпка 2: Проверка
Визуализирайте уеб страницата, създадена от горния код, която изглежда така:
Резултатът показва, че елементът е преместен надясно и надолу с 4px.
Метод 2: Използване на вариант на фокус със свойство на позиция
Вариантът на фокусиране се използва за стилизиране на HTML елементи, за да привлече вниманието на потребителя и да постави акцент върху някои елементи. Позицията може също да се приложи заедно за позициониране на обекта относително или абсолютно към родителската страница. Прави се, за да поддържа потребителя ангажиран.
Стъпка 1: Добавете свойството Focus с позиция в HTML
Създайте HTML файл и приложете свойството фокус с подходяща позиция. Например относителната позиция се прилага към поле за въвеждане в кода по-долу:
< / тяло >
В този код:
- Задайте позицията на „ вход „ елементи към „ роднина ”.
- “ фокус: translate-x-4 ” премества бутона 4px надясно по оста x и в същото време 4px надолу с „ фокус: translate-y-4 ”, когато потребителят кликне върху полето за въвеждане.
- “ фокус: контур-2 ” създава контур около текстовото поле, когато потребителят щракне върху него.
Стъпка 2: Проверете изхода
Визуализирайте уеб страницата, създадена от код, за да забележите промяната:
Горният резултат показва, че стилът е приложен към избрания елемент, когато той бъде фокусиран.
Използване на активен вариант със свойство позиция.
Активният вариант се използва за стилизиране на HTML елементите, за да се определи състоянието, когато потребителят щракне и задържи бутон или някакъв друг елемент. Свойството position може да направи изхода по-ангажиращ за потребителите, създавайки по-динамично изживяване.
Стъпка 1: Добавете свойството Hover с позиция в HTML
Създайте HTML файл и приложете активния вариант във връзка със свойството позиция. Например, тези свойства се прилагат към бутон в примерния код по-долу:
< бутон клас = 'относителна w-48 h-12 bg-blue-500 active:translate-y-2 active:bg-green-400' >
< педя клас = 'текст-бял' >Щракнете върху мен< / педя >
< / бутон >
< / тяло >
В горния код:
- Задайте позицията на „ бутон ' елемент към ' роднина ”.
- “ bg-blue-500 ” задава цвета на фона на бутона на син.
- “ активен: translate-y-2 ” премества бутона с 2 пиксела надолу и променя цвета на бутона на зелен чрез „ активен: bg-green-400 ”.
Стъпка 2: Проверете изхода
Визуализирайте уеб страницата, създадена от горния код, и щракнете и задръжте бутона, за да видите промяната:
Горният gif показва, че стилът на избрания бутонен елемент се променя, когато стане активен.
Това е всичко, за да приложите задържането, фокуса и други състояния със свойството позиция в Tailwind.
Заключение
Ховърът, фокусът и други състояния могат да се използват със свойството на позицията, като се използват предварително дефинираните класове на курсора, фокусът и други състояния, след което се прилагат атрибути на класа на позиция като „ абсолютен ', ' роднина ” и така нататък във връзка. Този блог показа как да използвате курсора, фокуса и други състояния с помощната програма за позициониране в Tailwind.