Ipagpalagay na ang isang user ay kailangang gumawa ng isang listahan ng mga item para sa kanilang webpage. Upang gawing mas madali ang proseso ng pagdidisenyo, ang Tailwind ay nagbibigay ng iba't ibang klase sa istilo ng listahan na maaaring magamit para sa pagbabago ng uri, posisyon, at pagkakahanay ng mga elemento ng listahan.
Ibibigay ng artikulong ito ang pamamaraan para sa pagtatakda ng uri ng istilo ng listahan sa Tailwind.
Paano Itakda ang Uri ng Estilo ng Listahan sa Tailwind?
Nagbibigay ang Tailwind ng tatlong default na uri ng istilo ng listahan. Ginagamit ang mga ito upang ibigay ang ' pananda ” istilo para sa mga item sa listahan. Ang tatlong default na klase ng uri ng estilo ng listahan ay inilarawan bilang mga sumusunod:
- list-disc: Ibibigay ng klase na ito ang mga round bullet point bilang marker ng listahan.
- list-decimal: Ibibigay ng klase na ito ang mga decimal na numero bilang marker ng listahan.
- listahan-wala: Aalisin ng klase na ito ang anumang mga marker ng listahan mula sa mga item.
Ang syntax para sa paggamit ng mga uri ng istilo ng listahan ay ang mga sumusunod:
< ul klase = 'listahan-{style}' > < / ul >
Para sa mas mahusay na pag-unawa, ang demonstration na ibinigay sa ibaba ay gagamit ng syntax na tinukoy sa itaas upang magbigay ng iba't ibang istilo ng marker upang maglista ng mga item. Sa halimbawang ito, tatlong elemento ng listahan ang gagawin at bibigyan ng iba't ibang istilo ng marker gamit ang mga default na klase ng istilo ng listahan sa Tailwind:
< p klase = 'text-center text-xl font-bold' > Default na Iba't ibang Listahan Estilo Mga uri sa Tailwind< / p >
< br >
< div klase = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klase = 'list-disc' >
LISTAHAN # 1
< na >Ito ang Unang Item< / na >
< na >Ito ang Pangalawang Item< / na >
< na >Ito ang Pangatlong Item< / na >
< / ul >
< ul klase = 'list-decimal' >
LISTAHAN # 2
< na >Ito ang Unang Item< / na >
< na >Ito ang Pangalawang Item< / na >
< na >Ito ang Pangatlong Item< / na >
< / ul >
< ul klase = 'lista-wala' >
LISTAHAN # 3
< na >Ito ang Unang Item< / na >
< na >Ito ang Pangalawang Item< / na >
< na >Ito ang Pangatlong Item< / na >
< / ul >
< / div >
Ang paliwanag ng code sa itaas ay ang mga sumusunod:
- isang ' Ang elemento ay nilikha gamit ang isang ' xl ” laki ng font at isang “ matapang ” bigat ng font. Ang nilalaman ng teksto ng elemento ay nakaposisyon sa gitna gamit ang ' text-center ” klase.
- Pagkatapos ng isang line break, isang ' Ang elemento ay nilikha at binibigyan ng isang ' baluktot ” klase. Gagawa ito ng lalagyan na iha-align nang pahalang ang mga item ng bata.
- Ang ' justify-center ” ilalagay ng klase ang mga bagay sa gitna ng lalagyan.
- Ang ' space-x-{size} ” class ay nagbibigay ng pahalang na espasyo sa pagitan ng mga item.
- Ang ' bg-{color}-{number} ” klase ay nagtatakda ng background ng lalagyan sa tinukoy na kulay.
- Ang ' bilugan-lg ” klase ay nagpapabilog sa mga sulok ng lalagyan.
- Ang ' mx-4 Ang klase ng ” ay nagbibigay ng pahalang na margin sa flex container.
- Ang ' p-2 ” klase ay nagbibigay ng padding sa flex container.
- Susunod, tatlong elemento ng listahan ang nilikha at binibigyan ng iba't ibang uri ng istilo ng listahan gamit ang ' listahan-{type} ” klase.
Output:
Mula sa output sa ibaba, makikita na ang unang listahan ay gumagamit ng mga bullet point, ang pangalawa ay gumagamit ng mga decimal na numero, at ang pangatlo ay hindi gumagamit ng anumang item marker.
Gamit ang Klase ng Estilo ng Listahan Sa Mga Variant ng Estado sa Tailwind
Maaaring gamitin ang klase ng istilo ng listahan kasama ang mga default na variant ng estado sa Tailwind para gawing mas dynamic ang disenyo. Gamit ang hover, focus, at mga aktibong variant ng estado, maaaring baguhin ng user ang istilo ng marker ng mga item sa listahan sa tuwing ma-trigger ang tinukoy na estado. Ang syntax para sa paggamit ng klase ng istilo ng listahan na may mga variant ng estado ay ang mga sumusunod:
< ul klase = '{state}:list-{style}...' > < / ul >Narito ang isang halimbawa ng paggamit ng uri ng istilo ng listahan na may 'hover' na estado, kung saan maaaring baguhin ng user ang istilo ng marker sa pamamagitan ng pag-hover sa block ng listahan:
< p klase = 'text-center text-xl font-bold' >I-hover ang Cursor sa List Block para Baguhin ang Marker Style< / p >
< br >
< div klase = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klase = 'list-disc hover:list-decimal' >
LISTAHAN # 1
< na >Ito ang Unang Item< / na >
< na >Ito ang Pangalawang Item< / na >
< na >Ito ang Pangatlong Item< / na >
< / ul >
< / div >Sa code sa itaas, ang listahan ay ibinigay kasama ang ' listahan-disc ” class bilang default na uri ng istilo ng listahan. Gayunpaman, gamit ang ' hover:list-decimal ” class, mababago ang uri ng istilo ng listahan kapag ini-hover ng user ang cursor ng mouse sa block ng listahan.
Output:
Ang output sa ibaba ay nagpapakita na ang istilo ng uri ng listahan ay nagbabago mula sa isang bullet na listahan patungo sa isang may bilang na listahan kapag nag-hover ang cursor sa block ng listahan.
Gamit ang Klase ng Estilo ng Listahan na May Mga Breakpoint sa Tailwind
Ginagamit ang mga breakpoint para sa tumutugon na pagdidisenyo ng layout para sa iba't ibang laki ng screen. Ang limang default na breakpoint na ibinigay ng Tailwind ay sm, md, lg, xl, at 2xl. Ang sumusunod na syntax ay ginagamit para sa pagbibigay ng klase ng estilo ng listahan na may breakpoint:
< ul klase = '{breakpoint}:list-{style}...' > < / ul >Narito ang isang halimbawa ng paggamit ng uri ng istilo ng listahan na may ' md ” breakpoint, kung saan magbabago ang istilo ng marker kapag umabot ang laki ng screen sa breakpoint na “md”:
< p klase = 'text-center text-xl font-bold' > Taasan ang Screen Sukat para Baguhin ang Marker Style< / p >
< br >
< div klase = 'flex justify-center space-x-20 bg-slate-100 rounded-lg mx-4 p-2' >
< ul klase = 'list-disc md:list-decimal' >
LISTAHAN # 1
< na >Ito ang Unang Item< / na >
< na >Ito ang Pangalawang Item< / na >
< na >Ito ang Pangatlong Item< / na >
< / ul >
< / div >Sa code sa itaas, ang listahan ay ibinigay kasama ang ' listahan-disc ” class bilang default na istilo. Gayunpaman, gamit ang ' md:list-decimal ” class ang uri ng istilo ng listahan ay magbabago para sa laki ng screen na “md”.
Output:
Tulad ng makikita mo sa output sa ibaba, ang uri ng estilo ng listahan ay nagbabago mula sa disc patungo sa decimal kapag ang laki ng screen ay umabot sa ' md ” breakpoint.
Iyon ay tungkol sa pagtatakda ng Uri ng Estilo ng Listahan sa Tailwind.
Konklusyon
Nagbibigay ang Tailwind ng tatlong paunang natukoy na klase ng uri ng istilo ng listahan para sa pagbabago ng istilo ng listahan ng isang elemento. Ang ' listahan-disc Ang klase ay nagbibigay ng mga bullet point para sa paglilista ng mga item. Ang ' listahan-decimal ” Ang klase ay nagbibigay ng mga numero para sa paglilista ng mga item. Ang ' listahan-wala ” class ay lumilikha ng isang listahan na hindi gumagamit ng anumang item marker. Ang artikulong ito ay nagbigay ng pamamaraan para sa pagtatakda ng uri ng istilo ng listahan sa Tailwind.