CSS предлага разнообразие от рамки за програмисти за проектиране на динамични уеб страници. Той е по-приятен, защото предоставя всички важни функции и инструменти на едно място. Така че не е нужно да използвате други рамки. Рамката Tailwind в CSS е най-широко използваната, защото спестява време на потребителя да пише прекомерен CSS.
Това ръководство предоставя използването на задържане, фокусиране и други състояния в Tailwind.
Как да използвате Hover, Focus и други състояния в Tailwind?
При проектирането на уеб страници е необходимо да се добавят динамични и атрактивни елементи, за да се поддържа интерактивност с потребителите. Функциите в Tailwind могат да се използват за създаване на интерактивни и динамични страници без писане на допълнителен персонализиран CSS. Някои функции са „задържане на мишката“, „фокус“ и „активен“, които помагат за добавяне на привлекателност към дизайните.
Използване на Hover Variant в HTML
Свойството hover се използва за стилизиране на HTML елемент, когато потребителят премести курсора на мишката върху определен елемент. Помага да се представи гладко изживяване.
Стъпка 1: Приложете свойството „hover“ в HTML
Създайте HTML файл и приложете свойството hover към някакъв елемент в кода. За да имате представа, погледнете кода, даден по-долу:
< тяло >
< див клас = 'център' >
< бутон клас = 'bg-green-500 hover:bg-blue-500 text-white font-bold rounded' >
Hover Me!
< / бутон >
< / див >
< / тяло >
В този код:
- Бутон с име „ Hover Me! ” се създава от етикета бутон.
- “ bg-green-500 ” задава цвета на фона на бутона на зелено.
- “ hover: bg-blue-500 ” променя цвета на бутона от зелен на син, когато мишката се премести върху него.
- Текстът в бутона е с бял цвят “ текст-бял ' и ' удебелен шрифт ” прави шрифта удебелен.
- Формата на бутона е кръгла с „ заоблени ”.
Стъпка 2: Визуализирайте изхода
След изпълнение на горния код, крайният изглед изглежда така:
Може да се види, че бутонът променя цвета си, когато курсорът на мишката се премести върху него.
Използване на вариант на фокус в HTML
Свойството focus се използва за стилизиране на HTML елементи, така че когато потребителят щракне върху елемента, той се маркира, за да привлече вниманието на потребителя.
Стъпка 1: Приложете свойството Focus в HTML кода
Създайте HTML файл и приложете свойството focus към някой желан елемент. За да получите впечатление, разгледайте кода по-долу:
< див >
< / див >
< / тяло >
В този код:
- „ flex ” клас създава flex.
- „ justify-center ” оправдава подравняването на съдържанието към центъра.
- „ предмети-център ” клас настройва обектите към центъра на екрана.
- „ h-екран ” задава размера на екрана според прозореца за изглед.
- “ bg-blue-200 ” задава цвета на фона на син.
- Създава се поле за въвеждане на текст.
- „ фокус: bg-green-300 ” променя цвета на полето за въвеждане на зелено, когато щракне от потребителя.
- “ w-64 ” задава ширината на 64px.
- “ з-10 ” задава височината на 10px.
- “ px-4 ” добавя подложка от 4px към горната и лявата страна.
- “ py-2 ” добавя подложка от 2px в горната и долната част.
Стъпка 2: Преглед на свойството Focus
Запазете HTML кода и отворете създадената от него уеб страница. След това преместете курсора върху полето за въвеждане и щракнете върху него и промяната по-долу ще се случи:
Използване на активния вариант в HTML
Това свойство се използва за стилизиране на елементи за условието, когато потребителят динамично докосне елемента. Активното състояние е периодът от време от етапа на активиране на курсора до неговото освободено състояние.
Синтаксис
активен: { Имот }Конкретното CSS свойство се прилага към избрания елемент.
Стъпка 1: Приложете активния вариант в HTML кода
Създайте HTML файл и приложете активното свойство към някакъв елемент, който в случая по-долу е бутон:
< див клас = 'flex justify-center items-center h-screen' >
< бутон клас = 'bg-green-600 p-4 rounded-md conversion-transform duration-400 transform active:scale-110' >
Щракни МЕН!
< / бутон >
< / див >
< / тяло >
В този код:
- “ bg-green-600 ” задава цвета на фона на зелено.
- “ p-4 ” добавя подложка от 4px.
- “ заоблен-мд ” прави формата на бутона заоблена.
- “ преход-трансформация ” се използва за трансформиране на бутона за кратко време, което се задава от „ продължителност-400 трансформация ”.
- „ активен: мащаб-110 ” трансформира бутона в по-голям размер.
Стъпка 2: Визуализирайте изхода
Запазете горния код в HTML файл и визуализирайте уеб страницата, създадена от него. Уеб страницата ще изглежда така:
Вижда се, че размерът на бутона се увеличава, когато мишката го задържи и веднага щом бъде отпуснат, се връща в първоначалното си състояние.
Заключение
За да използвате задържане, фокусиране и други състояния в Tailwind, използвайте предварително дефинираните класове на състояние като „задържане“ и приложете някои свойства за стилизиране към него, като промяна на цвета, създаване на фокусен пръстен и т.н. Помощните програми за показване се използват за представяне на мащабируем изход. Тази статия демонстрира метода за използване на задържане, фокусиране и други състояния в Tailwind.