Ibibigay ng artikulong ito ang pamamaraan para sa pagtatakda ng istilong-listang imahe ng isang block ng listahan sa Tailwind.
Paano Itakda ang Klase ng Imahe ng Estilo ng Listahan sa Tailwind?
Ang List Style Image Class ay ginagamit para sa pagbibigay ng imahe bilang list marker sa Tailwind. Bilang default, ang Tailwind ay nagbibigay lamang ng ' listahan-larawan-wala ” class na magagamit lamang para sa pag-alis ng anumang naunang itinakda na marker ng imahe para sa isang listahan.
Syntax
Ang syntax para sa paggamit ng klase ng imahe ng istilo ng listahan sa Tailwind ay ang mga sumusunod:
< ul klase = 'list-image-[url({Image Url})]' > < / ul >
Ang syntax na ito ay nagbibigay ng tinukoy na imahe bilang isang marker para sa elemento ng listahan.
< ul klase = 'listahan-larawan-wala' > < / ul >
Tinatanggal ng syntax na ito ang anumang naunang itinakda na mga imahe bilang marker para sa isang elemento ng listahan.
Gamitin natin ang natukoy na syntax sa itaas upang gumamit ng isang imahe bilang isang marker sa isang hindi nakaayos na listahan. Sa pagpapakitang ito, ang user ay may larawang pinangalanang ' handpointer.png ” na nasa loob ng parehong folder ng proyekto ng Tailwind. Sa kaso kung ang imahe ay naroroon sa ilang iba pang folder, ang gumagamit ay kailangang magbigay ng buong landas sa klase ng imahe ng estilo ng listahan. Gagamitin namin ang larawang iyon bilang isang marker ng listahan gamit ang klase ng 'listahan-larawan'.
< div klase = 'flex justify-center' >
< ul klase = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
HALIMBAWA LISTAHAN
< 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 at binibigyan ng ' baluktot ” klase na nakahanay sa mga item nang pahalang sa isang lalagyan.
- Ang ' justify-center ” inihanay ng klase ang mga item ng bata sa gitna ng lalagyan.
- Susunod, ang '
- Ito ay binibigyan ng ' listahan-loob ” class na maglalagay ng tinukoy na list item marker sa loob ng list block.
- Ang ' list-image-[url({Image Url})] Ang klase ng ” ay ginagamit para sa pagbibigay ng isang imahe bilang isang marker ng item sa listahan sa elemento.
- Ang ' space-y-{number} Ang klase ng ” ay nagbibigay ng patayong espasyo sa pagitan ng mga item sa listahan.
- Ang ' bilugan-md Ginagawa ng klase na bilugan ang mga sulok ng block ng listahan.
- Ang ' bg-{color}-{number} Ang klase ng ” ay ginagamit para sa pagbibigay ng kulay ng background sa block ng listahan.
- Ang ' p-2 Ang klase ay nagbibigay ng hangganan sa elemento ng listahan.
- Tatlong listahan ng mga item ay nilikha gamit ang '
” mga tag. Output:
Ito ay makikita sa output, na ang isang hand pointer na imahe ay nakatakda bilang marker para sa listahan ng mga item:
Paggamit ng Mga Variant ng Estado na May Klase ng Imahe ng Estilo ng Listahan sa Tailwind
Nagbibigay ang Tailwind ng iba't ibang variant ng estado tulad ng hover, focus, at active na tumutulong sa paglikha ng mga interactive na disenyo. Upang gumamit ng class-style na klase ng imahe na may ganitong mga estado, ginagamit ang sumusunod na syntax:
< ul klase = '{state}:list-image-{none OR image url}' > < / ul >Gamitin natin ang natukoy na syntax sa itaas para gamitin ang list-style na image property na may ' hover ” estado sa Tailwind. Sa pagpapakitang ito, ang listahan ay bibigyan ng isang imahe bilang marker ng listahan. Gayunpaman, gamit ang ' hover ” estado, aalisin ang larawan.
< div klase = 'flex justify-center' >
< ul klase = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
HALIMBAWA LISTAHAN
< 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 ' hover:list-image-none Tinatanggal ng klase ang dating itinakda na imahe bilang marker ng listahan.
Output:
Sa output sa ibaba, ang larawang istilo ng listahan ay ni-reset sa ' wala ” kapag ini-hover ng user ang mouse cursor sa ibabaw nito. Dahil dito, inalis ang larawang ginagamit bilang marker ng listahan.
Paggamit ng Mga Breakpoint na May Listahan ng Imahe ng Estilo ng Klase sa Tailwind
Ang mga breakpoint ay mga pre-set na media query para sa mga elemento sa Tailwind. Ginagamit ang mga ito upang gawing tumutugon ang disenyo para sa iba't ibang laki ng screen. Kasama sa mga breakpoint na ito ang sm, md, lg, xl, at 2xl. Upang gumamit ng class-style na image class na may breakpoint, ginagamit ang sumusunod na syntax:
< ul klase = '{breakpoint}:list-image-{none OR image url}' > < / ul >Gamitin natin ang natukoy na syntax sa itaas para baguhin ang list marker mula sa isang ' larawan 'sa' wala ” gamit ang isang breakpoint. Sa halimbawang ito, aalisin ang marker ng imahe sa sandaling tumaas ang laki ng screen sa lapad ng ' md ” breakpoint:
< div klase = 'flex justify-center' >
< ul klase = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
HALIMBAWA LISTAHAN
< 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 ' md:list-image-none Tinatanggal ng klase ang marker ng listahan ng larawan kapag umabot ang laki ng screen sa ' md ” breakpoint.
Output:
Sa output sa ibaba, ang image marker ay aalisin kapag ang laki ng screen ay umabot sa md breakpoint:
Iyon ay tungkol sa pagtatakda ng larawang istilo ng listahan sa Tailwind.
Konklusyon
Ang Tailwind ay may dalawang paunang natukoy na mga klase ng larawan sa istilo ng listahan para sa pag-alis o pagtatakda ng marker ng listahan ng isang elemento sa isang imahe. Ang ' list-image-[url({Image Url})] ” klase ay nagbibigay ng tinukoy na imahe bilang marker ng listahan. Ang ' listahan-larawan-wala Tinatanggal ng klase ang anumang naunang ibinigay na imahe bilang marker ng listahan. Ang artikulong ito ay nagbigay ng pamamaraan para sa pagtatakda ng uri ng istilo ng listahan sa Tailwind.