Denne artikel vil give proceduren for indstilling af listestilbilledet af en listeblok i Tailwind.
Hvordan indstilles listestilbilledklassen i medvind?
Listestilbilledklassen bruges til at give et billede som listemarkør i Tailwind. Som standard leverer Tailwind kun ' liste-billede-ingen ” klasse, der kun kan bruges til at fjerne enhver tidligere indstillet billedmarkør for en liste.
Syntaks
Syntaksen for at bruge billedklassen for listestil i Tailwind er som følger:
< ul klasse = 'liste-billede-[url({Billed-url})]' > < / ul >
Denne syntaks giver det angivne billede som en markør for listeelementet.
< ul klasse = 'liste-billede-ingen' > < / ul >
Denne syntaks fjerner alle tidligere indstillede billeder som markør for et listeelement.
Lad os bruge den ovenfor definerede syntaks til at bruge et billede som en markør i en uordnet liste. I denne demonstration har brugeren et billede med navnet ' handpointer.png ” til stede i den samme Tailwind-projektmappe. Hvis billedet er til stede i en anden mappe, skal brugeren angive den fulde sti til billedklassen for listestil. Vi vil bruge det billede som en listemarkør ved hjælp af klassen 'list-image'.
< div klasse = 'flex justify-center' >
< ul klasse = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
EKSEMPELLISTE
< at >Dette er det første element< / at >
< at >Dette er det andet punkt< / at >
< at >Dette er det tredje element< / at >
< / ul >
< / div >
Forklaringen af ovenstående kode er som følger:
- en ' '-elementet oprettes og er forsynet med ' bøje ” klasse, der justerer elementerne vandret i en container.
- Det ' retfærdiggøre-center ” klasse justerer de underordnede elementer til midten af beholderen.
- Dernæst '
- Den er forsynet med ' liste inde ” klasse, der vil placere den angivne listeelementmarkør inde i listeblokken.
- Det ' liste-billede-[url({Billed-url})] Klasse bruges til at give et billede som en listeelementmarkør til elementet.
- Det ' space-y-{number} ” klasse giver det lodrette mellemrum mellem listeelementerne.
- Det ' afrundet-md ” klasse gør hjørnerne af listeblokken afrundede.
- Det ' bg-{color}-{number} ” klasse bruges til at give baggrundsfarven til listeblokken.
- Det ' p-2 ” klasse giver grænsen til listeelementet.
- Tre listeelementer oprettes ved hjælp af '
” tags. Produktion:
Det kan ses i outputtet, at et håndmarkørbillede er sat som markør for listepunkterne:
Brug af tilstandsvarianter med listestil billedklasse i medvind
Tailwind leverer forskellige tilstandsvarianter såsom hover, focus og active, som hjælper med at skabe interaktive designs. For at bruge en billedklasse i listestil med disse tilstande bruges følgende syntaks:
< ul klasse = '{state}:liste-billede-{ingen ELLER billedwebadresse}' > < / ul >Lad os bruge den ovenfor definerede syntaks til at bruge billedegenskaben i listestil med ' svæve ” stat i Tailwind. I denne demonstration vil listen blive forsynet med et billede som listemarkør. Men ved at bruge ' svæve ” tilstand, vil billedet blive fjernet.
< div klasse = 'flex justify-center' >
< ul klasse = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
EKSEMPELLISTE
< at >Dette er det første element< / at >
< at >Dette er det andet punkt< / at >
< at >Dette er det tredje element< / at >
< / ul >
< / div >I ovenstående kode er ' hover:list-image-none ” klasse fjerner det tidligere indstillede billede som listemarkør.
Produktion:
I nedenstående output nulstilles billedet i listestil til ' ingen ” når brugeren holder musemarkøren over den. På grund af dette blev det billede, der blev brugt som listemarkør, fjernet.
Brug af brudpunkter med listestil billedklasse i medvind
Brydpunkterne er forudindstillede medieforespørgsler for elementerne i Tailwind. De bruges til at gøre designet responsivt til forskellige skærmstørrelser. Disse brudpunkter inkluderer sm, md, lg, xl og 2xl. For at bruge en billedklasse i listestil med et brudpunkt bruges følgende syntaks:
< ul klasse = '{breakpoint}:liste-billede-{ingen ELLER billedwebadresse}' > < / ul >Lad os bruge den ovenfor definerede syntaks til at ændre listemarkøren fra en ' billede ' til ' ingen ” ved hjælp af et brudpunkt. I dette eksempel vil billedmarkøren blive fjernet, når skærmstørrelsen øger bredden af ' md ” brudpunkt:
< div klasse = 'flex justify-center' >
< ul klasse = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
EKSEMPELLISTE
< at >Dette er det første element< / at >
< at >Dette er det andet punkt< / at >
< at >Dette er det tredje element< / at >
< / ul >
< / div >I ovenstående kode er ' md:liste-billede-ingen '-klassen fjerner billedlistemarkøren, når skærmstørrelsen når ' md ” brudpunkt.
Produktion:
I nedenstående output fjernes billedmarkøren, når skærmstørrelsen når md-brudpunktet:
Det handler om at indstille billedet i listestil i Tailwind.
Konklusion
Tailwind har to foruddefinerede billedklasser i listestil til at fjerne eller indstille listemarkøren for et element til et billede. Det ' liste-billede-[url({Billed-url})] ” klasse giver det angivne billede som listemarkør. Det ' liste-billede-ingen ” klasse fjerner ethvert tidligere angivet billede som listemarkør. Denne artikel har angivet proceduren for indstilling af listestiltypen i Tailwind.