In diesem Artikel wird jedoch auf zwei spezifische Klassen eingegangen, nämlich Proportionalzahlen und Tabellenzahlen. Diese werden verwendet, um die numerischen Werte in Tailwind zu formatieren und die numerischen Daten so anzuordnen und darzustellen, dass sie für das Design des Dokuments ansprechend sind.
In diesem Artikel werden die proportionalen und tabellarischen Zahlen in Tailwind CSS anhand der folgenden Gliederung erläutert:
- Wie verwende ich Proportionalzahlen in Tailwind CSS?
- Wie verwende ich tabellarische Abbildungen in Tailwind CSS?
- Unterschied zwischen proportionalen und tabellarischen Zahlen
Wie verwende ich Proportionalzahlen in Tailwind CSS?
Die Proportionalzahlenklasse weist dem Element eine Konvention zu, bei der nicht jede Zahl die gleiche Breite hat.
Syntax
Die Syntax zur Verwendung der Proportionalzahlen in Tailwind lautet wie folgt:
< div Klasse = „Proportionalzahlen“ >
< div / >
In der oben angegebenen Syntax lautet „ Proportionalzahlen Die Klasse „muss dem Element bereitgestellt werden, um proportionale Zahlen zu verwenden.
Sehen wir uns ein praktisches Beispiel für Proportionalzahlen an.
Im unten bereitgestellten Code sind zwei „ P „Elemente sind in einem „ div ” Element, das die Proportionalzahlenklasse verwendet:
< div Klasse = „proportional-nums text-center bg-slate-200 text-xl“ >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Die Erklärung des oben bereitgestellten Codes lautet wie folgt:
- Der ' div Das Element verwendet das Element „ Proportionalzahlen ”-Klasse, die die proportionale Zahleneigenschaft auf die Zahlen anwendet.
- Der ' Text-Center Die Klasse „Positioniert den Text in der Mitte des Elements.
- Der ' bg-{color}-{number} Die Klasse „ist für die Hintergrundfarbe des Elements verantwortlich.
- Der ' text-xl Die Klasse „stellt eine besonders große Schriftgröße für den Text bereit.
- Als nächstes zwei „ P Es werden Elemente erstellt, die unterschiedliche Zahlen enthalten.
Ausgabe
In der Ausgabe ist zu erkennen, dass die Zahlen im zweiten „ P „Element haben eine etwas größere Breite als das erste. Das liegt an der Klasse der Proportionalfiguren:
Wie verwende ich tabellarische Abbildungen in Tailwind CSS?
Die tabellarischen Zahlen in Tailwind weisen die Konvention einem Element zu, bei dem jede Zahl die gleiche Breite hat. Dadurch entsteht eine symmetrische, tabellenartige Darstellung der Zahlen.
Syntax
Die Syntax zur Verwendung der tabellarischen Abbildungen lautet wie folgt:
< div Klasse = „tabellarische Zahlen“ >< div / >
In der oben angegebenen Syntax lautet „ tabellarische Zahlen Dem Element wird die Klasse „Klasse“ zur Verfügung gestellt, um die tabellarischen Abbildungen zu verwenden.
Sehen wir uns an, wie das „ tabellarische Zahlen ” wirken sich auf die numerischen Werte in einem HTML-Dokument aus. Für diese Demonstration wurden zwei „ P ” mit numerischen Werten werden erstellt und in einem „ div ” Element, das die Klasse der tabellarischen Abbildungen verwendet:
< div Klasse = „ tabular-nums text-center bg-slate-200 text-xl“ >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Im obigen Code ist das „ tabellarische Zahlen Die Klasse wird bereitgestellt für die Klasse „ div „Element, das dem Kind den Stil der Tabellenfiguren zuweist“ P ”Elemente.
Ausgabe:
Aus der obigen Ausgabe ist ersichtlich, dass die numerischen Werte in beiden Elementen aufgrund der gleichen Breite der Ziffern perfekt ausgerichtet sind.
Bonusinfo: Unterschied zwischen proportionalen und tabellarischen Zahlen in Tailwind CSS
Sehen wir uns eine Demonstration an, die die Auswirkung der tabellarischen und proportionalen Zahlenklassen auf die numerischen Werte unterscheidet. In dieser Demonstration wird den Elementen standardmäßig die Klasse Proportionalfiguren zugewiesen. Als Nächstes wird den Elementen mithilfe des Hover-Zustands die Klasse der tabellarischen Abbildungen zugewiesen:
< div Klasse = „proportional-nums text-center bg-slate-200 text-xl hover:tabular-nums“ >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Im obigen Code ist zu sehen, dass „ div ”-Element ist mit dem „ Proportionalzahlen “, was die Standardkonvention ist, der die numerischen Werte folgen.
Ebenso aufgrund der „ hover:tabular-nums ”-Klasse folgen die numerischen Werte der Tabellenkonvention, wenn der Benutzer den Mauszeiger über das „div“-Element bewegt.
Ausgabe
In der angegebenen Ausgabe ändert sich die Breite der numerischen Werte, wenn der Benutzer mit der Maus über das Element fährt. Dies stellt den visuellen Unterschied zwischen den proportionalen und den tabellarischen Zahlen in Tailwind dar:
Bei Tailwind dreht sich alles um proportionale und tabellarische Zahlen.
Abschluss
Um in Tailwind proportionale Zahlen zu verwenden, muss „ Proportionalzahlen ”-Klasse verwendet wird. Die Proportionalzahlen verwenden die Konvention, bei der jeder numerische Wert eine andere Breite hat. Um die tabellarischen Zahlen in Tailwind zu verwenden, muss „ tabellarische Zahlen ”-Klasse verwendet wird. Die tabellarischen Abbildungen verwenden die Konvention, dass jeder numerische Wert die gleiche Breite hat. In diesem Artikel wird das Verfahren zur Verwendung der proportionalen und tabellarischen Zahlen in Tailwind beschrieben.