Ta članek ponuja postopek za nastavitev slike bloka seznama v slogu seznama v Tailwindu.
Kako nastaviti slikovni razred sloga seznama v Tailwindu?
Razred slike sloga seznama se uporablja za zagotavljanje slike kot oznake seznama v Tailwindu. Tailwind privzeto ponuja samo ' seznam-slika-brez ”, ki se lahko uporablja le za odstranjevanje katerega koli predhodno nastavljenega slikovnega označevalca za seznam.
Sintaksa
Sintaksa za uporabo razreda slike sloga seznama v Tailwindu je naslednja:
< ul razred = 'list-image-[url({Image Url})]' > < / ul >
Ta sintaksa zagotavlja določeno sliko kot oznako za element seznama.
< ul razred = 'list-image-none' > < / ul >
Ta sintaksa odstrani vse predhodno nastavljene slike kot oznako za element seznama.
Uporabimo zgoraj definirano sintakso za uporabo slike kot oznake na neurejenem seznamu. V tej predstavitvi ima uporabnik sliko z imenom ' handpointer.png ” znotraj iste projektne mape Tailwind. V primeru, da je slika prisotna v kakšni drugi mapi, mora uporabnik podati celotno pot do razreda slike sloga seznama. To sliko bomo uporabili kot oznako seznama z uporabo razreda 'slika seznama'.
< div razred = 'fleksibilno poravnano središče' >
< ul razred = ' seznam-notranji seznam-slika-[url(handpointer.png)] presledek-y-2 zaokrožen-md bg-zelen-400 p-2' >
VZORČNI SEZNAM
< to >To je prvi element< / to >
< to >To je drugi predmet< / to >
< to >To je tretji predmet< / to >
< / ul >
< / div >
Razlaga zgornje kode je naslednja:
- A “ ' je ustvarjen element in je opremljen z ' flex ”, ki vodoravno poravna elemente v vsebniku.
- ' poravnati na sredino ” poravna podrejene elemente na sredino vsebnika.
- Nato je '
- Na voljo je z ' seznam-znotraj ”, ki bo podano oznako elementa seznama postavil znotraj bloka seznama.
- ' seznam-slika-[url({Url slike})] ” se uporablja za zagotavljanje slike kot oznake elementa seznama za element.
- ' presledek-y-{število} ” zagotavlja navpični prostor med elementi seznama.
- ' zaobljeno-md ” zaokroži vogale bloka seznama.
- ' bg-{barva}-{številka} ” se uporablja za zagotavljanje barve ozadja bloku seznama.
- ' p-2 ” zagotavlja obrobo elementa seznama.
- Trije elementi seznama so ustvarjeni z uporabo »
” oznake. Izhod:
V izhodu je razvidno, da je slika kazalca roke nastavljena kot oznaka za elemente seznama:
Uporaba različic stanja z razredom slike sloga seznama v Tailwind
Tailwind ponuja različne različice stanja, kot so lebdenje, fokus in aktivno, kar pomaga pri ustvarjanju interaktivnih modelov. Za uporabo razreda slike v slogu seznama s temi stanji je uporabljena naslednja sintaksa:
< ul razred = '{state}:list-image-{brez ALI url slike}' > < / ul >Uporabimo zgoraj definirano sintakso za uporabo lastnosti slike v slogu seznama z ' lebdeti ” stanje v Tailwindu. V tej predstavitvi bo seznam opremljen s sliko kot oznako seznama. Vendar z uporabo ' lebdeti ”, bo slika odstranjena.
< div razred = 'fleksibilno poravnano središče' >
< ul razred = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
VZORČNI SEZNAM
< to >To je prvi element< / to >
< to >To je drugi predmet< / to >
< to >To je tretji predmet< / to >
< / ul >
< / div >V zgornji kodi je » hover:list-image-none ” odstrani predhodno nastavljeno sliko kot oznako seznama.
Izhod:
V spodnjem rezultatu se slika v slogu seznama ponastavi na ' nič «, ko uporabnik premakne kazalec miške nad njim. Zaradi tega je bila slika, ki je bila uporabljena kot oznaka seznama, odstranjena.
Uporaba prelomnih točk z razredom slike sloga seznama v Tailwindu
Prekinitvene točke so vnaprej nastavljene medijske poizvedbe za elemente v Tailwindu. Uporabljajo se, da se dizajn odziva na različne velikosti zaslona. Te prelomne točke vključujejo sm, md, lg, xl in 2xl. Za uporabo slikovnega razreda v slogu seznama s prekinitveno točko je uporabljena naslednja sintaksa:
< ul razred = '{breakpoint}:list-image-{brez ALI url slike}' > < / ul >Uporabimo zgoraj definirano sintakso, da spremenimo oznako seznama iz ' slika ' do ' nič « z uporabo prekinitvene točke. V tem primeru bo oznaka slike odstranjena, ko se velikost zaslona poveča za širino ' md ” prelomna točka:
< div razred = 'fleksibilno poravnano središče' >
< ul razred = ' seznam-notranji seznam-slika-[url(handpointer.png)] md:list-image-brez presledka-y-2 zaokrožen-md bg-green-400 p-2' >
VZORČNI SEZNAM
< to >To je prvi element< / to >
< to >To je drugi predmet< / to >
< to >To je tretji predmet< / to >
< / ul >
< / div >V zgornji kodi je » md:list-image-none ' odstrani oznako seznama slik, ko velikost zaslona doseže ' md ” prelomna točka.
Izhod:
V spodnjem rezultatu je oznaka slike odstranjena, ko velikost zaslona doseže prelomno točko md:
To je vse o nastavitvi slike v slogu seznama v Tailwindu.
Zaključek
Tailwind ima dva vnaprej določena razreda slik v slogu seznama za odstranjevanje ali nastavitev oznake elementa na sliki. ' seznam-slika-[url({Url slike})] ” poda podano sliko kot oznako seznama. ' seznam-slika-brez ” odstrani katero koli predhodno podano sliko kot označevalnik seznama. Ta članek ponuja postopek za nastavitev vrste sloga seznama v Tailwindu.