Denne artikel vil dog uddybe to specifikke klasser, som er proportionale tal og tabelfigurer. Disse bruges til at style de numeriske værdier i Tailwind og arrangere og repræsentere de numeriske data på en måde, der appellerer til dokumentets design.
Denne artikel vil uddybe de proportionale og tabelformede figurer i Tailwind CSS ved hjælp af følgende oversigt:
- Hvordan bruger man proportionelle tal i Tailwind CSS?
- Hvordan bruger man tabelformede figurer i Tailwind CSS?
- Forskellen mellem proportionelle og tabelformede figurer
Hvordan bruger man proportionelle tal i Tailwind CSS?
Klassen proportionale tal vil tildele elementet en konvention, hvor hvert tal ikke har samme bredde.
Syntaks
Syntaksen for at bruge de proportionale tal i Tailwind er som følger:
< div klasse = 'proportional-numre' >
< div / >
I den ovenfor angivne syntaks er ' proportional-numre ” klasse skal gives til elementet for at bruge proportionale tal.
Lad os se et praktisk eksempel på proportionale tal.
I den nedenfor angivne kode er to ' s ' elementer er indeholdt i en ' div ' element, der bruger klassen proportionale tal:
< div klasse = 'Proportional-nums text-center bg-slate-200 text-xl' >< s > 121212 < / s >
< s > 838383 < / s >
< / div >
Forklaringen af den ovenfor angivne kode er som følger:
- Det ' div ' element bruger ' proportional-numre ” klasse, der vil anvende egenskaben proportionalfigur på tallene.
- Det ' tekst-center ” klasse placerer teksten i midten af elementet.
- Det ' bg-{color}-{number} ” klasse er ansvarlig for elementets baggrundsfarve.
- Det ' tekst-xl ” klasse giver en ekstra stor skriftstørrelse til teksten.
- Dernæst to ' s ” elementer oprettes indeholdende forskellige tal.
Produktion
Det kan ses i outputtet, at tal i den anden ' s ” element har en lidt større bredde end det første. Dette skyldes klassen proportionale tal:
Hvordan bruger man tabelformede figurer i Tailwind CSS?
Tabelfigurerne i Tailwind tildeler konventionen til et element, hvor hvert tal har samme breddestørrelse. Dette skaber en symmetrisk tabellignende repræsentation af tallene.
Syntaks
Syntaksen for at bruge tabelfigurerne er som følger:
< div klasse = 'tabel-numre' >< div / >
I den ovenfor angivne syntaks er ' tabel-numre ” klasse leveres til elementet for at bruge tabelfigurerne.
Lad os se, hvordan ' tabel-numre ” påvirker de numeriske værdier i et HTML-dokument. Til denne demonstration, to ' s ' med numeriske værdier er oprettet og indeholdt i en ' div ' element, der bruger klassen tabelformede figurer:
< div klasse = ' tabel-numre tekst-center bg-slate-200 text-xl' >< s > 121212 < / s >
< s > 838383 < / s >
< / div >
I ovenstående kode er ' tabel-numre '-klassen leveres til ' div ' element, som vil tildele stilen af tabelfigurerne til barnet ' s ' elementer.
Produktion:
Det kan ses i ovenstående output, at de numeriske værdier i begge elementer er justeret perfekt på grund af de samme breddestørrelser af cifrene.
Bonusinfo: Forskellen mellem proportionelle og tabelformede figurer i Tailwind CSS
Lad os se en demonstration, der adskiller virkningen af tabelformede og proportionale talklasser på de numeriske værdier. I denne demonstration vil elementerne blive tildelt klassen proportionale tal som standard. Dernæst vil elementerne ved hjælp af svævetilstanden blive tildelt klassen tabelformede figurer:
< div klasse = 'Proportional-nums text-center bg-slate-200 text-xl hover:tabel-numre' >< s > 121212 < / s >
< s > 838383 < / s >
< / div >
Det kan ses i ovenstående kode, at ' div '-elementet er forsynet med ' proportional-numre ”, som vil være standardkonventionen, som de numeriske værdier vil følge.
Tilsvarende på grund af ' hover:tabel-numre ” klasse, vil de numeriske værdier følge tabelformkonventionen, når brugeren holder musemarkøren over “div”-elementet.
Produktion
I det givne output ændres bredden af de numeriske værdier, når brugeren holder musen over elementet. Dette giver den visuelle forskel mellem de proportionale og tabelformede figurer i Tailwind:
Det handler om proportionale og tabelformede tal i Tailwind.
Konklusion
For at bruge proportionale tal i Tailwind, ' proportional-numre ” klasse bruges. De proportionale tal bruger konventionen, hvor hver numerisk værdi har en forskellig breddestørrelse. For at bruge tabelfigurerne i Tailwind, ' tabel-numre ” klasse bruges. Tabelfigurerne bruger konventionen, hvor hver numerisk værdi har den samme breddestørrelse. Denne artikel har angivet proceduren for brug af proportional- og tabeltal i Tailwind.