Овај чланак ће пружити процедуру за постављање слике у стилу листе за блок листе у Таилвинд-у.
Како подесити класу слике стила листе у Таилвинд-у?
Класа слике стила листе се користи за обезбеђивање слике као маркера листе у Таилвинд-у. Подразумевано, Таилвинд пружа само „ листа-слика-нема ” која се може користити само за уклањање било којег претходно постављеног маркера слике за листу.
Синтакса
Синтакса за коришћење класе слике стил листе у Таилвинд-у је следећа:
< ул класа = 'лист-имаге-[урл({Имаге Урл})]' > < / ул >
Ова синтакса обезбеђује наведену слику као маркер за елемент листе.
< ул класа = 'лист-имаге-ноне' > < / ул >
Ова синтакса уклања све претходно постављене слике као маркере за елемент листе.
Хајде да користимо горе дефинисану синтаксу да користимо слику као маркер у неуређеној листи. У овој демонстрацији, корисник има слику под називом „ хандпоинтер.пнг ” који се налази унутар исте фасцикле пројекта Таилвинд. У случају да је слика присутна у неком другом фолдеру, корисник мора да наведе пуну путању до класе слике стила листе. Користићемо ту слику као маркер листе користећи класу „лист-имаге“.
< див класа = ' флек јустифи-центер' >
< ул класа = ' лист-инсиде лист-имаге-[урл(хандпоинтер.пнг)] спаце-и-2 роундед-мд бг-греен-400 п-2' >
ЛИСТА УЗОРАКА
< то >Ово је прва ставка< / то >
< то >Ово је друга ставка< / то >
< то >Ово је трећа ставка< / то >
< / ул >
< / див >
Објашњење горњег кода је следеће:
- А “ <див> ” елемент је креиран и опремљен је са „ флек ” која хоризонтално поравнава ставке у контејнеру.
- „ јустифи-центар ” класа поравнава подређене ставке са средиштем контејнера.
- Затим, „ <ул> ” класа се користи за креирање неуређене листе.
- Обезбеђен је са „ лист-инсиде ” која ће поставити означени маркер ставке листе унутар блока листе.
- „ листа-слика-[урл({Урл слике})] ” класа се користи за пружање слике као маркера ставке листе елементу.
- „ размак-и-{број} ” класа обезбеђује вертикални простор између ставки листе.
- „ роундед-мд ” класа чини углове блока листе заобљеним.
- „ бг-{цолор}-{нумбер} ” класа се користи за давање боје позадине блоку листе.
- „ п-2 ” класа обезбеђује границу елемента листе.
- Три ставке листе се креирају помоћу „ <то> ' ознаке.
Излаз:
На излазу се може видети да је слика показивача руке постављена као маркер за ставке листе:
Коришћење варијанти стања са класом слике стила листе у Таилвинд-у
Таилвинд пружа различите варијанте стања као што су лебдење, фокус и активно што помаже у креирању интерактивних дизајна. Да бисте користили класу слике у стилу листе са овим стањима, користи се следећа синтакса:
< ул класа = „{стате}:лист-имаге-{ноне ОР имаге урл}“ > < / ул >Хајде да користимо горе дефинисану синтаксу да користимо својство слике у стилу листе са „ лебдети ” стање у Таилвинд. У овој демонстрацији, листа ће имати слику као маркер листе. Међутим, коришћењем „ лебдети “, слика ће бити уклоњена.
< див класа = ' флек јустифи-центер' >< ул класа = ' лист-инсиде лист-имаге-[урл(хандпоинтер.пнг)] ховер:лист-имаге-ноне спаце-и-2 роундед-мд бг-греен-400 п-2' >
ЛИСТА УЗОРАКА
< то >Ово је прва ставка< / то >
< то >Ово је друга ставка< / то >
< то >Ово је трећа ставка< / то >
< / ул >
< / див >
У горњем коду, „ ховер:лист-имаге-ноне ” класа уклања претходно постављену слику као маркер листе.
Излаз:
У доњем излазу, слика у стилу листе се ресетује на „ ниједан ” када корисник пређе курсором миша преко њега. Због тога је уклоњена слика која је коришћена као маркер листе.
Коришћење тачака прекида са класом слике стила листе у Таилвинд-у
Тачке прекида су унапред постављени медијски упити за елементе у Таилвинд-у. Користе се да би дизајн био прилагодљив за различите величине екрана. Ове тачке прекида укључују см, мд, лг, кл и 2кл. Да бисте користили класу слике у стилу листе са тачком прекида, користи се следећа синтакса:
< ул класа = „{бреакпоинт}:лист-имаге-{ноне ОР имаге урл}“ > < / ул >Хајде да користимо горе дефинисану синтаксу да променимо маркер листе са „ слика ' до ' ниједан ” користећи тачку прекида. У овом примеру, маркер слике ће бити уклоњен када величина екрана повећа ширину „ доктор медицине ” тачка прекида:
< див класа = ' флек јустифи-центер' >< ул класа = ' лист-инсиде лист-имаге-[урл(хандпоинтер.пнг)] мд:лист-имаге-ноне спаце-и-2 роундед-мд бг-греен-400 п-2' >
ЛИСТА УЗОРАКА
< то >Ово је прва ставка< / то >
< то >Ово је друга ставка< / то >
< то >Ово је трећа ставка< / то >
< / ул >
< / див >
У горњем коду, „ мд:лист-имаге-ноне ” класа уклања маркер листе слика када величина екрана достигне „ доктор медицине ” тачка прекида.
Излаз:
У доњем излазу, маркер слике се уклања када величина екрана достигне мд тачку прекида:
То је све о постављању слике у стилу листе у Таилвинд-у.
Закључак
Таилвинд има две унапред дефинисане класе слика у стилу листе за уклањање или постављање маркера листе елемента на слику. „ листа-слика-[урл({Урл слике})] ” класа обезбеђује наведену слику као маркер листе. „ листа-слика-нема ” класа уклања било коју претходно дату слику као маркер листе. Овај чланак је пружио процедуру за подешавање типа стила листе у Таилвинд-у.