Kako postaviti sliku stila popisa u Tailwindu

Ovaj članak će pružiti postupak za postavljanje slike u stilu popisa bloka popisa u Tailwindu.

Kako postaviti klasu slike stila popisa u Tailwindu?

Klasa slike stila popisa koristi se za pružanje slike kao oznake popisa u Tailwindu. Prema zadanim postavkama, Tailwind pruža samo ' lista-slika-ništa ” koja se može koristiti samo za uklanjanje bilo koje prethodno postavljene oznake slike za popis.

Sintaksa

Sintaksa za korištenje klase slika stila popisa u Tailwindu je sljedeća:

Ova sintaksa daje navedenu sliku kao oznaku za element popisa.

Ova sintaksa uklanja sve prethodno postavljene slike kao oznake za element popisa.

Upotrijebimo gore definiranu sintaksu za korištenje slike kao oznake na neuređenom popisu. U ovoj demonstraciji, korisnik ima sliku pod nazivom ' kazaljka.png ” prisutan unutar iste mape Tailwind projekta. U slučaju da se slika nalazi u nekoj drugoj mapi, korisnik mora dati puni put do klase slike stila popisa. Koristit ćemo tu sliku kao oznaku popisa koristeći klasu 'list-image'.

Objašnjenje gornjeg koda je sljedeće:

• A “
  ' element je kreiran i opremljen je ' savijati ” klasa koja vodoravno poravnava stavke u spremniku.
• ' poravnati-centrirati ” klasa podređene stavke poravnava sa središtem spremnika.
• Zatim, '
  ” klasa se koristi za stvaranje nesređenog popisa.
  • Opremljen je s ' popis-unutra ” klasa koja će staviti navedenu oznaku stavke popisa unutar bloka popisa.
  • ' popis-slika-[url({Url slike})] ” klasa se koristi za pružanje slike kao oznake stavke popisa elementu.
  • ' razmak-y-{broj} ” klasa pruža okomiti prostor između stavki popisa.
  • ' zaobljeno-md ” zaokružuje kutove bloka popisa.
  • ' bg-{boja}-{broj} ” klasa se koristi za pružanje pozadinske boje bloku popisa.
  • ' p-2 ” klasa daje obrub elementu popisa.
  • Tri stavke popisa stvaraju se pomoću ' ' oznake.

  Izlaz:

  U izlazu se može vidjeti da je slika pokazivača ruke postavljena kao oznaka za stavke popisa:

  

  Korištenje varijanti stanja s klasom slike stila popisa u Tailwindu

  Tailwind pruža različite varijante stanja kao što su lebdjenje, fokus i aktivno što pomaže u stvaranju interaktivnih dizajna. Za korištenje klase slika u stilu popisa s ovim stanjima koristi se sljedeća sintaksa:

  < ul razreda = '{state}:list-image-{none OR image url}' > < / ul >

  Upotrijebimo gore definiranu sintaksu za korištenje svojstva slike u stilu popisa s ' lebdjeti ” stanje u Tailwindu. U ovoj demonstraciji, popis će imati sliku kao oznaku popisa. Međutim, koristeći ' lebdjeti ” stanje, slika će biti uklonjena.

  < div razreda = 'fleksibilno poravnanje-centar' >
  
  < ul razreda = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
  
  POPIS UZORAKA
  
  < da >Ovo je prva stavka< / da >
  
  < da >Ovo je druga stavka< / da >
  
  < da >Ovo je treća stavka< / da >
  
  < / ul >
  
  < / div >

  U gornjem kodu, ' hover:list-image-none ” klasa uklanja prethodno postavljenu sliku kao oznaku popisa.

  Izlaz:

  U donjem izlazu, slika u stilu popisa vraća se na ' nikakav ” kada korisnik prijeđe kursorom miša iznad njega. Zbog toga je uklonjena slika koja se koristila kao oznaka popisa.

  

  Korištenje prijelomnih točaka s klasom slike stila popisa u Tailwindu

  Prijelomne točke su unaprijed postavljeni medijski upiti za elemente u Tailwindu. Koriste se kako bi dizajn bio osjetljiv na različite veličine zaslona. Ove prijelomne točke uključuju sm, md, lg, xl i 2xl. Za korištenje klase slika u stilu popisa s točkom prekida koristi se sljedeća sintaksa:

  < ul razreda = '{breakpoint}:list-image-{none OR image url}' > < / ul >

  Upotrijebimo gore definiranu sintaksu da promijenimo oznaku popisa iz ' slika ” do “ nikakav ” koristeći prijelomnu točku. U ovom primjeru, oznaka slike bit će uklonjena kada veličina zaslona poveća širinu ' doktor medicine ” Prijelomna točka:

  < div razreda = 'fleksibilno poravnanje-centar' >
  
  < ul razreda = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
  
  POPIS UZORAKA
  
  < da >Ovo je prva stavka< / da >
  
  < da >Ovo je druga stavka< / da >
  
  < da >Ovo je treća stavka< / da >
  
  < / ul >
  
  < / div >

  U gornjem kodu, ' md:popis-slika-ništa ' klasa uklanja oznaku popisa slika kada veličina zaslona dosegne ' doktor medicine ” prijelomna točka.

  Izlaz:

  U donjem izlazu, oznaka slike se uklanja kada veličina zaslona dosegne md prijelomnu točku:

  

  To je sve o postavljanju slike u stilu popisa u Tailwindu.

  Zaključak

  Tailwind ima dvije unaprijed definirane klase slika u stilu popisa za uklanjanje ili postavljanje markera popisa elementa na sliku. ' popis-slika-[url({Url slike})] ” klasa daje navedenu sliku kao oznaku popisa. ' lista-slika-ništa ” klasa uklanja sve prethodno navedene slike kao oznake popisa. Ovaj članak pruža postupak za postavljanje vrste stila popisa u Tailwindu.