In dit artikel wordt echter dieper ingegaan op twee specifieke klassen, namelijk proportionele cijfers en tabelvormige cijfers. Deze worden gebruikt om de numerieke waarden in Tailwind vorm te geven en de numerieke gegevens te rangschikken en weer te geven op een manier die aantrekkelijk is voor het ontwerp van het document.
Dit artikel gaat dieper in op de proportionele en tabellarische cijfers in Tailwind CSS met behulp van het volgende overzicht:
- Hoe proportionele cijfers te gebruiken in Tailwind CSS?
- Hoe gebruik ik tabellarische figuren in Tailwind CSS?
- Verschil tussen proportionele en tabellarische cijfers
Hoe proportionele cijfers te gebruiken in Tailwind CSS?
De klasse proportionele cijfers wijst het element een conventie toe waarbij elk getal niet dezelfde breedte heeft.
Syntaxis
De syntaxis voor het gebruik van de proportionele cijfers in Tailwind is als volgt:
< div klas = 'proportionele cijfers' >
< div / >
In de hierboven gegeven syntaxis is de “ proportionele getallen Er moet een klasse aan het element worden gegeven om proportionele cijfers te kunnen gebruiken.
Laten we een praktisch voorbeeld van proportionele cijfers bekijken.
In de onderstaande code worden twee “ P ”-elementen zijn opgenomen in een “ div ”-element dat de klasse proportionele cijfers gebruikt:
< div klas = 'proportionele getallen tekstcentrum bg-slate-200 tekst-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
De uitleg van de hierboven verstrekte code is als volgt:
- De ' div '-element gebruikt de ' proportionele getallen ”-klasse die de eigenschap proportionele cijfers op de getallen toepast.
- De ' tekst-centrum ” klasse positioneert de tekst in het midden van het element.
- De ' bg-{kleur}-{nummer} ”klasse is verantwoordelijk voor de achtergrondkleur van het element.
- De ' tekst-xl ”-klasse biedt een extra grote lettergrootte voor de tekst.
- Vervolgens twee “ P Er worden elementen gemaakt die verschillende getallen bevatten.
Uitvoer
In de uitvoer is te zien dat getallen in de tweede “ P ”-element heeft een iets grotere breedte dan het eerste. Dit komt door de klasse proportionele cijfers:
Hoe gebruik ik tabellarische figuren in Tailwind CSS?
De tabellarische figuren in Tailwind kennen de conventie toe aan een element waarbij elk getal dezelfde breedte heeft. Hierdoor ontstaat een symmetrische tabelachtige weergave van de getallen.
Syntaxis
De syntaxis voor het gebruik van de figuren in tabelvorm is als volgt:
< div klas = 'tabel-nums' >< div / >
In de hierboven gegeven syntaxis is de “ tabel-nums ”-klasse wordt aan het element gegeven om de tabellarische figuren te gebruiken.
Laten we eens kijken hoe de “ tabel-nums ' heeft invloed op de numerieke waarden in een HTML-document. Voor deze demonstratie zijn twee “ P ” met numerieke waarden worden gemaakt en opgenomen in een “ div ”-element dat de klasse voor tabellarische figuren gebruikt:
< div klas = ' tabellarums tekstcentrum bg-slate-200 tekst-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
In de bovenstaande code wordt de “ tabel-nums ” klasse wordt gegeven aan de “ div 'element dat de stijl van de tabelfiguren aan het kind zal toewijzen' P elementen.
Uitgang:
In de bovenstaande uitvoer is te zien dat de numerieke waarden in beide elementen perfect zijn uitgelijnd vanwege dezelfde breedtematen van de cijfers.
Bonusinformatie: verschil tussen proportionele en tabellarische cijfers in Tailwind CSS
Laten we een demonstratie bekijken die het effect van tabellarische en proportionele cijfers op de numerieke waarden differentieert. In deze demonstratie krijgen de elementen standaard de klasse proportionele cijfers toegewezen. Vervolgens krijgen de elementen, met behulp van de hover-status, de klasse figuren in tabelvorm toegewezen:
< div klas = 'proportioneel-nums tekstcentrum bg-slate-200 tekst-xl hover:tabel-nums' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
In de bovenstaande code is te zien dat de “ div ”-element is voorzien van de “ proportionele getallen ”, wat de standaardconventie is die de numerieke waarden zullen volgen.
Ook vanwege de “ hover: tabellarums ”klasse, zullen de numerieke waarden de tabellarische conventie volgen wanneer de gebruiker de muiscursor over het “div” -element beweegt.
Uitvoer
In de gegeven uitvoer verandert de breedte van de numerieke waarden wanneer de gebruiker de muis over het element beweegt. Dit levert het visuele verschil op tussen de proportionele en de tabellarische cijfers in Tailwind:
Dat gaat allemaal over proportionele en tabellarische cijfers in Tailwind.
Conclusie
Om proportionele cijfers in Tailwind te gebruiken, moet de “ proportionele getallen ”-klasse wordt gebruikt. De proportionele cijfers gebruiken de conventie waarbij elke numerieke waarde een andere breedtegrootte heeft. Om de tabellarische figuren in Tailwind te gebruiken, moet de “ tabel-nums ”-klasse wordt gebruikt. De figuren in tabelvorm gebruiken de conventie waarbij elke numerieke waarde dezelfde breedtegrootte heeft. In dit artikel wordt de procedure beschreven voor het gebruik van de proportionele en tabellarische cijfers in Tailwind.