Тази статия ще предостави процедурата за настройка на изображение в стил списък на блок от списък в Tailwind.
Как да настроите класа на изображението в стила на списъка в Tailwind?
Класът на изображението в стила на списъка се използва за предоставяне на изображение като маркер на списъка в Tailwind. По подразбиране Tailwind предоставя само „ списък-изображение-няма ”, който може да се използва само за премахване на всеки предварително зададен маркер за изображение за списък.
Синтаксис
Синтаксисът за използване на класа на изображение със стил на списък в Tailwind е както следва:
< ул клас = 'списък-изображение-[url({Url на изображение})]' > < / ул >
Този синтаксис предоставя указаното изображение като маркер за елемента на списъка.
< ул клас = 'списък-изображение-няма' > < / ул >
Този синтаксис премахва всички предварително зададени изображения като маркер за елемент от списък.
Нека използваме дефинирания по-горе синтаксис, за да използваме изображение като маркер в неподреден списък. В тази демонстрация потребителят има изображение с име „ handpointer.png ” в същата папка на проекта Tailwind. В случай, че изображението присъства в друга папка, потребителят трябва да предостави пълния път до класа на изображението в стил списък. Ще използваме това изображение като маркер за списък, използвайки класа „списък-изображение“.
< див клас = 'гъвкаво оправдаване-център' >
< ул клас = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
ПРИМЕРЕН СПИСЪК
< че >Това е първият елемент< / че >
< че >Това е вторият елемент< / че >
< че >Това е третият елемент< / че >
< / ул >
< / див >
Обяснението на горния код е както следва:
- A “ ” се създава елемент и се предоставя с „ flex ”, който подравнява елементите хоризонтално в контейнер.
- „ justify-center ” клас подравнява дъщерните елементи към центъра на контейнера.
- След това „
- Предоставя се с „ списък-вътре ”, който ще постави указания маркер за елемент от списъка вътре в блока от списък.
- „ list-image-[url({Image Url})] ” клас се използва за предоставяне на изображение като маркер на елемент от списъка към елемента.
- „ интервал-y-{число} ” осигурява вертикалното пространство между елементите на списъка.
- „ заоблен-мд ” прави ъглите на списъчния блок заоблени.
- „ bg-{цвят}-{номер} ” класът се използва за предоставяне на цвета на фона на списъчния блок.
- „ p-2 ” осигурява границата на елемента от списъка.
- Три елемента от списъка се създават с помощта на „ <това> ” етикети.
Изход:
Може да се види в изхода, че изображение на показалец на ръка е зададено като маркер за елементите от списъка:
Използване на варианти на състояние с клас на изображение в стил списък в Tailwind
Tailwind предоставя различни варианти на състояние, като задържане, фокусиране и активно, което помага при създаването на интерактивни дизайни. За да използвате клас на изображение в стил списък с тези състояния, се използва следният синтаксис:
< ул клас = „{state}:list-image-{none OR image url}“ > < / ул >Нека използваме дефинирания по-горе синтаксис, за да използваме свойството на изображение в стил списък с „ завъртане ” състояние в Tailwind. В тази демонстрация списъкът ще бъде предоставен с изображение като маркер на списъка. Въпреки това, използвайки „ завъртане ”, изображението ще бъде премахнато.
< див клас = 'гъвкаво оправдаване-център' >
< ул клас = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
ПРИМЕРЕН СПИСЪК
< че >Това е първият елемент< / че >
< че >Това е вторият елемент< / че >
< че >Това е третият елемент< / че >
< / ул >
< / див >В горния код „ hover: list-image-none ” клас премахва предварително зададеното изображение като маркер на списъка.
Изход:
В резултата по-долу изображението в стила на списък се нулира на „ нито един ”, когато потребителят задържи курсора на мишката върху него. Поради това изображението, което се използваше като маркер на списъка, беше премахнато.
Използване на точки на прекъсване с клас на изображение в стил списък в Tailwind
Точките на прекъсване са предварително зададени медийни заявки за елементите в Tailwind. Те се използват, за да направят дизайна отзивчив за различни размери на екрана. Тези точки на прекъсване включват sm, md, lg, xl и 2xl. За да използвате клас на изображение в стил списък с точка на прекъсване, се използва следният синтаксис:
< ул клас = „{breakpoint}:list-image-{none OR image url}“ > < / ул >Нека използваме дефинирания по-горе синтаксис, за да променим маркера на списъка от „ изображение ' да се ' нито един ” с помощта на точка на прекъсване. В този пример маркерът на изображението ще бъде премахнат, след като размерът на екрана увеличи ширината на „ md ' точка на пречупване:
< див клас = 'гъвкаво оправдаване-център' >
< ул клас = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
ПРИМЕРЕН СПИСЪК
< че >Това е първият елемент< / че >
< че >Това е вторият елемент< / че >
< че >Това е третият елемент< / че >
< / ул >
< / див >В горния код „ md:списък-изображение-няма ” премахва маркера на списъка с изображения, когато размерът на екрана достигне „ md ' точка на пречупване.
Изход:
В резултата по-долу маркерът на изображението се премахва, когато размерът на екрана достигне точката на прекъсване на md:
Това е всичко относно настройката на изображението в стил списък в Tailwind.
Заключение
Tailwind има два предварително дефинирани класа изображения в стил списък за премахване или настройка на маркера за списък на елемент към изображение. „ list-image-[url({Image Url})] ” предоставя определеното изображение като маркер на списъка. „ списък-изображение-няма ” клас премахва всяко предварително предоставено изображение като маркер на списъка. Тази статия предоставя процедурата за задаване на тип стил на списък в Tailwind.