В этой статье объясняется, как использовать диагональные дроби в Tailwind.
Как использовать диагональные дроби в CSS Tailwind?
Класс диагональной дроби в Tailwind — это предопределенный вариант числового шрифта, который уменьшает числитель и знаменатель и разделяет их косой чертой. Из-за этого номер дроби кажется отличным от остального текста.
Синтаксис
Синтаксис использования « диагональные дроби класс выглядит следующим образом:
< div сорт '=' 'диагональные дроби' >
< div / >
Как вы можете видеть из приведенного выше синтаксиса, разработчик должен предоставить « диагональные дроби ' в ' сорт » атрибут элемента.
Давайте воспользуемся классом «диагональные дроби» в качестве практического примера. В приведенной ниже демонстрации пользователь может увидеть разницу между обычными дробями и диагональными дробями:
< div сорт '=' 'bg-slate-200 текстовый центр text-lg' >< п >Нормальные фракции: 3 / 5 6 / 3 6 / 5 < / п >
< п сорт '=' 'диагональные дроби' >Диагональные дроби: 3 / 5 6 / 3 6 / 5 < / п >
< / div >
Объяснение приведенного выше кода следующее:
- « div Элемент ” создается и предоставляется в качестве цвета фона с помощью параметра “ bg-{цвет}-{число} ' сорт.
- Затем текст выделяется крупным шрифтом и выравнивается по центру элемента с помощью « текст-LG ' и ' текстовый центр классы соответственно.
- Дальше два» <р> создаются элементы, где второй снабжен атрибутом « диагональные дроби ' сорт.
Выход:
Разницу между диагональной дробью и нормальной дробью можно ясно увидеть в приведенном выше выводе.
Использование класса диагональной дроби с точками останова
Точки останова используются в качестве медиа-запросов в Tailwind. Существует пять точек останова по умолчанию с указанной минимальной шириной. Эти точки останова можно использовать с любым классом в Tailwind для создания адаптивных и динамичных макетов дизайна.
Чтобы использовать « диагональные дроби ” с точкой останова в Tailwind, используется следующий синтаксис:
{ префикс точки останова } : диагональная дробьВ таблице ниже указана минимальная ширина для различных точек останова в Tailwind:
| Префикс точки останова | Минимальная ширина |
|---|---|
| см | 640 пикселей |
| Мэриленд | 768 пикселей |
| LG | 1024 пикселей |
| XL | 1280 пикселей |
| 2xl | 1536 пикселей |
Давайте использовать точки останова с помощью « диагональные дроби » класс, чтобы практически понять их использование:
< div сорт '=' 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
В приведенном выше коде элемент div указан в разделе « md:диагональные дроби ” класс, который будет менять шрифт числовых дробей при “ Мэриленд » достигнута точка останова.
Выход
Как вы можете видеть в выводе, дробные числа отображаются шрифтом диагональной дроби, когда « Мэриленд достигнута точка останова:
Использование класса диагональной дроби с состояниями попутного ветра
Попутный ветер предоставляет значение по умолчанию « состояния », чтобы придать элементу свойства дизайна при срабатывании этого конкретного состояния. Это делает дизайн-макет более привлекательным и динамичным. Чтобы использовать класс «диагональные дроби» с состоянием в Tailwind, используется следующий синтаксис:
{ состояние } : диагональная дробьСостояние по умолчанию, предоставляемое Tailwind, следующее:
- Наведите курсор: Когда пользователь наводит курсор на элемент.
- Фокус: Когда пользователь фокусируется на элементе, переходя к нему.
- Активный: Когда пользователь активирует элемент, щелкнув по нему.
- Запрещать: Когда пользователю не разрешено активировать элемент.
В приведенной ниже демонстрации представлен практический пример использования « диагональные дроби ” класс с “ зависать » заявляете в «Попутном ветре»:
< div сорт '=' 'bg-slate-200 text-center text-lg hover: diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
« div Элемент ” в приведенном выше коде предоставляется с помощью элемента “ hover:диагональные дроби », который изменит обычный шрифт чисел дробей на шрифт диагональных дробей.
Выход
Как вы можете видеть в выводе, цифровой шрифт числа дроби меняется, когда пользователь наводит на него курсор мыши:
Это все, что касается использования класса диагональной дроби в CSS Tailwind.
Заключение
Чтобы использовать диагональные дроби в Tailwind CSS, используйте параметр « диагональная дробь ' сорт. Этот класс разделит числитель и знаменатель косой чертой и сделает их маленькими. Пользователи также могут использовать класс «диагональные дроби» с точками останова и состояниями по умолчанию в Tailwind, чтобы сделать дизайн более динамичным. В этой статье описана процедура использования диагональных дробей в Tailwind.