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