Предположим, что пользователю нужно создать список элементов для своей веб-страницы. Чтобы упростить процесс проектирования, Tailwind предоставляет различные классы стиля списка, которые можно использовать для изменения типа, положения и выравнивания элементов списка.
В этой статье описана процедура установки типа стиля списка в Tailwind.
Как установить тип стиля списка в Tailwind?
Tailwind предоставляет три типа стилей списков по умолчанию. Они используются для обеспечения « маркер стиль для элементов списка. Три класса типов стилей списка по умолчанию описаны следующим образом:
- список-диск: Этот класс предоставит круглые пункты в качестве маркера списка.
- список-десятичный: Этот класс будет предоставлять десятичные числа в качестве маркера списка.
- список-нет: Этот класс удалит все маркеры списка из элементов.
Синтаксис использования типов стилей списка следующий:
< ул сорт '=' 'список-{стиль}' > < / ул >
Для лучшего понимания в приведенной ниже демонстрации будет использоваться определенный выше синтаксис для предоставления различных стилей маркеров для отображения элементов списка. В этом примере будут созданы три элемента списка, которым будут присвоены различные стили маркеров с использованием классов стилей списка по умолчанию в Tailwind:
< п сорт '=' 'текст-центр текста-xl шрифт-жирный' >Другой список по умолчанию Стиль Типы в Tailwind< / п >
< бр >
< div сорт '=' 'flex justify-center space-x-20 bg-slate-100 округлый-lg mx-4 p-2' >
< ул сорт '=' 'список-диск' >
СПИСОК # 1
< что >Это первый предмет< / что >
< что >Это второй предмет< / что >
< что >Это третий предмет< / что >
< / ул >
< ул сорт '=' 'список-десятичный' >
СПИСОК # 2
< что >Это первый предмет< / что >
< что >Это второй предмет< / что >
< что >Это третий предмет< / что >
< / ул >
< ул сорт '=' 'нет списка' >
СПИСОК # 3
< что >Это первый предмет< / что >
< что >Это второй предмет< / что >
< что >Это третий предмет< / что >
< / ул >
< / div >
Объяснение приведенного выше кода следующее:
- А» <р> ” элемент создается с помощью “ XL ” размер шрифта и “ смелый » вес шрифта. Текстовое содержимое элемента позиционируется в центре с помощью « текстовый центр ' сорт.
- После разрыва строки появляется « <дел> элемент ” создан и снабжен атрибутом “ гибкий ' сорт. Это создаст контейнер, который будет выравнивать дочерние элементы по горизонтали.
- « оправдывать-центр ” класс разместит элементы в центре контейнера.
- « пробел-x-{размер} Класс ” обеспечивает горизонтальное пространство между элементами.
- « bg-{цвет}-{число} Класс » устанавливает фон контейнера в указанный цвет.
- « округлый-LG Класс ” делает углы контейнера закругленными.
- « мх-4 Класс ” обеспечивает горизонтальное поле для гибкого контейнера.
- « р-2 Класс ” обеспечивает заполнение гибкого контейнера.
- Затем создаются три элемента списка, которым присваиваются разные типы стилей списка с помощью « список-{тип} ' сорт.
Выход:
Из приведенного ниже вывода видно, что в первом списке используются маркированные списки, во втором — десятичные числа, а в третьем не используется маркер элемента.
Использование класса стиля списка с вариантами состояния в Tailwind
Класс стиля списка можно использовать с вариантами состояния по умолчанию в Tailwind, чтобы сделать дизайн более динамичным. Используя варианты наведения, фокуса и активного состояния, пользователь может изменить стиль маркера элементов списка всякий раз, когда срабатывает указанное состояние. Синтаксис использования класса стиля списка с вариантами состояний следующий:
< ул сорт '=' '{state}:list-{style}...' > < / ул >Вот пример использования типа стиля списка с состоянием «наведение», где пользователь может изменить стиль маркера, наведя курсор на блок списка:
< п сорт '=' 'текст-центр текста-xl шрифт-жирный' >Наведите курсор на блок списка, чтобы изменить стиль маркера< / п >< бр >
< div сорт '=' 'flex justify-center space-x-20 bg-slate-100 округлый-lg mx-4 p-2' >
< ул сорт '=' 'список-диск при наведении: список-десятичный' >
СПИСОК # 1
< что >Это первый предмет< / что >
< что >Это второй предмет< / что >
< что >Это третий предмет< / что >
< / ул >
< / div >
В приведенном выше коде список снабжен тегом « список-диск ” в качестве типа стиля списка по умолчанию. Однако, используя « наведение: список-десятичный ” тип стиля списка будет изменен, когда пользователь наводит курсор мыши на блок списка.
Выход:
Вывод ниже показывает, что стиль типа списка меняется с маркированного списка на нумерованный список, когда курсор наводит курсор на блок списка.
Использование класса стиля списка с точками останова в Tailwind
Точки останова используются для адаптивного проектирования макета для экранов разных размеров. Tailwind предоставляет пять точек останова по умолчанию: sm, md, lg, xl и 2xl. Следующий синтаксис используется для предоставления классу стиля типа списка точки останова:
< ул сорт '=' '{точка останова}:список-{стиль}...' > < / ул >Вот пример использования типа стиля списка с « Мэриленд точка останова», где стиль маркера изменится, когда размер экрана достигнет точки останова «md»:
< п сорт '=' 'текст-центр текста-xl шрифт-жирный' >Увеличить экран Размер чтобы изменить стиль маркера< / п >< бр >
< делитель сорт '=' 'flex justify-center space-x-20 bg-slate-100 округлый-lg mx-4 p-2' >
< ул сорт '=' 'список-диск md: список-десятичный' >
СПИСОК # 1
< что >Это первый предмет< / что >
< что >Это второй предмет< / что >
< что >Это третий предмет< / что >
< / ул >
< / делитель >
В приведенном выше коде список снабжен тегом « список-диск ” в качестве стиля по умолчанию. Однако, используя « мд: список-десятичный ” тип стиля списка изменится в зависимости от размера экрана “md”.
Выход:
Как вы можете видеть в приведенном ниже выводе, тип стиля списка меняется с дискового на десятичный, когда размер экрана достигает « Мэриленд » точка останова.
Это все, что касается настройки типа стиля списка в Tailwind.
Заключение
Tailwind предоставляет три предопределенных класса типов стилей списка для изменения стиля списка элемента. « список-диск Класс ” предоставляет пункты для перечисления элементов. « десятичный список Класс » предоставляет номера для перечисления элементов. « список-нет Класс ” создает список, в котором не используются маркеры элементов. В этой статье описана процедура установки типа стиля списка в Tailwind.