В этой статье описана процедура настройки изображения блока списка в виде списка в Tailwind.
Как установить класс изображения стиля списка в Tailwind?
Класс изображения стиля списка используется для предоставления изображения в качестве маркера списка в Tailwind. По умолчанию Tailwind предоставляет только « список-изображений-нет », который можно использовать только для удаления любого ранее установленного маркера изображения для списка.
Синтаксис
Синтаксис использования класса изображения стиля списка в Tailwind следующий:
< ул сорт '=' 'list-image-[url({URL изображения})]' > < / ул >
Этот синтаксис предоставляет указанное изображение в качестве маркера для элемента списка.
< ул сорт '=' 'список-изображений-нет' > < / ул >
Этот синтаксис удаляет все ранее установленные изображения в качестве маркера для элемента списка.
Давайте воспользуемся определенным выше синтаксисом, чтобы использовать изображение в качестве маркера в неупорядоченном списке. В этой демонстрации у пользователя есть изображение с именем « Handpointer.png » присутствует в той же папке проекта Tailwind. В случае, если изображение присутствует в какой-либо другой папке, пользователь должен указать полный путь к классу изображения стиля списка. Мы будем использовать это изображение в качестве маркера списка, используя класс «list-image».
< делитель сорт '=' 'гибкий центр выравнивания' >
< ул сорт '=' ' список-внутри списка-изображения-[url(handpointer.png)] пробел-y-2 округленный-md bg-green-400 p-2' >
ПРИМЕР СПИСКА
< что >Это первый предмет< / что >
< что >Это второй предмет< / что >
< что >Это третий предмет< / что >
< / ул >
< / делитель >
Объяснение приведенного выше кода следующее:
- А» <дел> элемент ” создан и снабжен атрибутом “ гибкий », который выравнивает элементы в контейнере по горизонтали.
- « оправдывать-центр ” класс выравнивает дочерние элементы по центру контейнера.
- Далее « <ул> Класс » используется для создания неупорядоченного списка.
- Он снабжен « список внутри », который поместит указанный маркер элемента списка внутри блока списка.
- « список-изображение-[url({URL изображения})] Класс » используется для предоставления изображения в качестве маркера элемента списка для элемента.
- « пробел-y-{число} Класс ” обеспечивает вертикальное пространство между элементами списка.
- « округлый-MD Класс ” делает углы блока списка закругленными.
- « bg-{цвет}-{число} Класс ” используется для предоставления цвета фона блоку списка.
- « р-2 Класс ” обеспечивает границу элемента списка.
- Три элемента списка создаются с помощью « <это> » теги.
Выход:
В выводе видно, что изображение указателя руки установлено в качестве маркера для элементов списка:
Использование вариантов состояния с классом изображения стиля списка в Tailwind
Tailwind предоставляет различные варианты состояний, такие как наведение, фокус и активный, что помогает в создании интерактивных проектов. Чтобы использовать класс изображения в виде списка с этими состояниями, используется следующий синтаксис:
< ул сорт '=' '{state}:list-image-{нет ИЛИ URL-адрес изображения}' > < / ул >Давайте воспользуемся определенным выше синтаксисом, чтобы использовать свойство изображения в виде списка с параметром « зависать » говорится в «Попутном ветре». В этой демонстрации список будет снабжен изображением в качестве маркера списка. Однако, используя « зависать », изображение будет удалено.
< делитель сорт '=' 'гибкий центр выравнивания' >< ул сорт '=' ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
ПРИМЕР СПИСКА
< что >Это первый предмет< / что >
< что >Это второй предмет< / что >
< что >Это третий предмет< / что >
< / ул >
< / делитель >
В приведенном выше коде « при наведении: список-изображений-нет Класс ” удаляет ранее установленное изображение в качестве маркера списка.
Выход:
В приведенном ниже выводе изображение в виде списка сбрасывается на « никто », когда пользователь наводит на него курсор мыши. В связи с этим изображение, использовавшееся в качестве маркера списка, было удалено.
Использование точек останова с классом изображения стиля списка в Tailwind
Точки останова — это предварительно установленные медиа-запросы для элементов Tailwind. Они используются для того, чтобы сделать дизайн адаптивным для экранов различных размеров. К этим точкам останова относятся sm, md, lg, xl и 2xl. Чтобы использовать класс изображения в виде списка с точкой останова, используется следующий синтаксис:
< ул сорт '=' '{breakpoint}:list-image-{нет ИЛИ URL-адрес изображения}' > < / ул >Давайте используем определенный выше синтаксис, чтобы изменить маркер списка с « изображение ' к ' никто » с использованием точки останова. В этом примере маркер изображения будет удален, как только размер экрана увеличит ширину « Мэриленд » точка останова:
< div сорт '=' 'гибкий центр выравнивания' >< ул сорт '=' ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
ПРИМЕР СПИСКА
< что >Это первый предмет< / что >
< что >Это второй предмет< / что >
< что >Это третий предмет< / что >
< / ул >
< / div >
В приведенном выше коде « мд: список-изображений-нет Класс ” удаляет маркер списка изображений, когда размер экрана достигает “ Мэриленд » точка останова.
Выход:
В приведенном ниже выводе маркер изображения удаляется, когда размер экрана достигает точки останова md:
Это все, что касается настройки изображения в виде списка в Tailwind.
Заключение
Tailwind имеет два предопределенных класса изображений в виде списка для удаления или установки маркера листинга элемента на изображение. « список-изображение-[url({URL изображения})] Класс ” предоставляет указанное изображение в качестве маркера списка. « список-изображений-нет Класс ” удаляет любое ранее предоставленное изображение в качестве маркера списка. В этой статье описана процедура установки типа стиля списка в Tailwind.