In diesem Artikel wird erklärt, wie man Diagonalbrüche in Tailwind verwendet.
Wie verwende ich diagonale Brüche in Tailwind CSS?
Die Diagonalbruchklasse in Tailwind ist eine vordefinierte numerische Schriftartvariante, die Zähler und Nenner kleiner macht und sie durch einen Schrägstrich trennt. Dadurch scheint sich die Bruchzahl vom Rest des Textes zu unterscheiden.
Syntax
Die Syntax der Verwendung von „ Diagonalbrüche Die Klasse lautet wie folgt:
< div Klasse = „Diagonalbrüche“ >
< div / >
Wie Sie der obigen Syntax entnehmen können, muss der Entwickler Folgendes bereitstellen: Diagonalbrüche ' im ' Klasse ” Attribut des Elements.
Nehmen wir die Klasse „Diagonalfraktionen“ als praktisches Beispiel. In der folgenden Demonstration kann der Benutzer den Unterschied zwischen den normalen Brüchen und den diagonalen Brüchen sehen:
< div Klasse = „bg-slate-200 text-center text-lg“ >< P >Normale Brüche: 3 / 5 6 / 3 6 / 5 < / P >
< P Klasse = „Diagonalbrüche“ >Diagonale Brüche: 3 / 5 6 / 3 6 / 5 < / P >
< / div >
Die Erklärung des obigen Codes lautet wie folgt:
- Der ' div Das Element wird erstellt und als Hintergrundfarbe bereitgestellt, indem das Element „“ verwendet wird. bg-{color}-{number} ' Klasse.
- Anschließend erhält der Text eine große Schriftgröße und wird mithilfe des „“ an der Mitte des Elements ausgerichtet. text-lg ' Und ' Text-Center ” Klassen bzw.
- Als nächstes zwei „ Es werden Elemente erstellt, wobei das zweite mit dem „ Diagonalbrüche ' Klasse.
Ausgabe:
Der Unterschied zwischen dem Diagonalbruch und dem Normalbruch ist in der obigen Ausgabe deutlich zu erkennen.
Verwenden der Diagonalbruchklasse mit Haltepunkten
Die Haltepunkte werden als Medienabfragen in Tailwind verwendet. Es gibt fünf Standardhaltepunkte mit festgelegten Mindestbreiten. Diese Haltepunkte können mit jeder Klasse in Tailwind verwendet werden, um reaktionsfähige und dynamische Designlayouts zu erstellen.
Um das „ Diagonalbrüche ”-Klasse mit einem Haltepunkt in Tailwind wird die folgende Syntax verwendet:
{ Haltepunktpräfix } : DiagonalbruchDie folgende Tabelle gibt die Mindestbreite für verschiedene Haltepunkte in Tailwind an:
| Haltepunktpräfix | Mindestbreite |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Verwenden wir Haltepunkte mit dem „ Diagonalbrüche ”-Klasse, um ihre Verwendung praktisch zu verstehen:
< div Klasse = „bg-slate-200 text-center text-lg md:diagonal-fractions“ >3/4, 7/8, 5/4, 6/5
< / div >
Im oben bereitgestellten Code wird ein div-Element im „ md:diagonalfraktionen ”-Klasse, die die Schriftart der numerischen Brüche ändert, wenn das „ md ”Haltepunkt ist erreicht.
Ausgabe
Wie Sie in der Ausgabe sehen können, werden die Bruchzahlen mit der diagonalen Bruchschrift versehen, wenn „ md „Haltepunkt ist erreicht:
Verwenden der Diagonalbruchklasse mit Rückenwindzuständen
Rückenwind sorgt für Standard „ Zustände ” um einem Element Designeigenschaften bereitzustellen, wenn dieser bestimmte Zustand ausgelöst wird. Dadurch wird das Design-Layout ansprechender und dynamischer. Um die Klasse „diagonal-fractions“ mit einem Zustand in Tailwind zu verwenden, wird die folgende Syntax verwendet:
{ Zustand } : DiagonalbruchDer von Tailwind bereitgestellte Standardstatus ist wie folgt:
- Schweben: Wenn der Benutzer den Cursor über das Element bewegt.
- Fokus: Wenn der Benutzer sich auf ein Element konzentriert, indem er zu ihm navigiert.
- Aktiv: Wenn der Benutzer ein Element aktiviert, indem er darauf klickt.
- Deaktivieren: Wenn der Benutzer ein Element nicht aktivieren darf.
Die folgende Demonstration bietet ein praktisches Beispiel für die Verwendung des „ Diagonalbrüche ” Klasse mit dem „ schweben ” Zustand in Tailwind:
< div Klasse = „bg-slate-200 text-center text-lg hover:diagonal-fractions“ >3/4, 7/8, 5/4, 6/5
< / div >
Der ' div Das Element im obigen Code wird durch ein „ hover:diagonal-fractions ”-Klasse, die die normale Schriftart der Bruchzahlen in die Schriftart für diagonale Brüche ändert.
Ausgabe
Wie Sie in der Ausgabe sehen können, ändert sich die numerische Schriftart der Bruchzahl, wenn der Benutzer mit dem Mauszeiger darüber fährt:
Dabei geht es um die Verwendung der Diagonalbruchklasse in Tailwind CSS.
Abschluss
Um die diagonalen Brüche in Tailwind CSS zu verwenden, verwenden Sie „ Diagonalbruch ' Klasse. Diese Klasse trennt den Zähler und den Nenner durch einen Schrägstrich und verkleinert sie. Benutzer können auch die Klasse „diagonal-fractions“ mit den Standardhaltepunkten und -zuständen in Tailwind verwenden, um das Design dynamischer zu gestalten. In diesem Artikel wird das Verfahren zur Verwendung der Diagonalbrüche in Tailwind beschrieben.