Cet article expliquera comment utiliser les fractions diagonales dans Tailwind.
Comment utiliser les fractions diagonales dans Tailwind CSS ?
La classe de fraction diagonale dans Tailwind est une variante de police numérique prédéfinie qui réduit le numérateur et le dénominateur et les sépare par une barre oblique. Cela rend le numéro de fraction distinct du reste du texte.
Syntaxe
La syntaxe d'utilisation du ' fractions diagonales ' La classe est la suivante :
< div classe = 'fractions diagonales' >
< div / >
Comme vous pouvez le voir dans la syntaxe ci-dessus, le développeur doit fournir « fractions diagonales ' dans le ' classe ' attribut de l'élément.
Utilisons la classe « fractions diagonales » comme exemple pratique. Dans la démonstration ci-dessous, l'utilisateur peut voir la différence entre les fractions normales et les fractions diagonales :
< div classe = 'bg-slate-200 texte-centre texte-lg' >< p >Fractions normales : 3 / 5 6 / 3 6 / 5 < / p >
< p classe = 'fractions diagonales' >Fractions diagonales : 3 / 5 6 / 3 6 / 5 < / p >
< / div >
L'explication du code ci-dessus est la suivante :
- Le ' div L'élément ' est créé et fourni comme couleur d'arrière-plan à l'aide de l'option ' bg-{couleur}-{numéro} ' classe.
- Ensuite, le texte est doté d'une police de grande taille et est aligné au centre de l'élément à l'aide du « texte-lg ' et ' centre de texte » classes respectivement.
- Ensuite, deux ' ' des éléments sont créés, le second étant pourvu du ' fractions diagonales ' classe.
Sortir:
La différence entre la fraction diagonale et la fraction normale est clairement visible dans le résultat ci-dessus.
Utilisation de la classe de fraction diagonale avec des points d'arrêt
Les points d'arrêt sont utilisés comme requêtes multimédias dans Tailwind. Il existe cinq points d'arrêt par défaut avec des largeurs minimales spécifiées. Ces points d'arrêt peuvent être utilisés avec n'importe quelle classe dans Tailwind pour créer des mises en page de conception réactives et dynamiques.
Pour utiliser le « fractions diagonales ' avec un point d'arrêt dans Tailwind, la syntaxe suivante est utilisée :
{ préfixe de point d'arrêt } : fraction diagonaleLe tableau ci-dessous fournit la largeur minimale pour les différents points d'arrêt dans Tailwind :
| Préfixe du point d'arrêt | Largeur minimale |
|---|---|
| sm | 640px |
| Maryland | 768px |
| LG | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Utilisons des points d'arrêt avec le ' fractions diagonales » pour comprendre concrètement leur utilisation :
< div classe = 'bg-slate-200 texte-centre texte-lg md:fractions diagonales' >3/4, 7/8, 5/4, 6/5
< / div >
Dans le code fourni ci-dessus, un élément div est fourni dans le « md: fractions diagonales ' classe qui changera la police des fractions numériques lorsque le ' Maryland ' Le point d'arrêt est atteint.
Sortir
Comme vous pouvez le voir dans le résultat, les nombres fractionnaires sont fournis avec la police de fraction diagonale lorsque le « Maryland ' Le point d'arrêt est atteint :
Utilisation de la classe de fraction diagonale avec les états de vent arrière
Tailwind fournit par défaut ' États ' afin de fournir des propriétés de conception à un élément lorsque cet état spécifique est déclenché. Cela rend la mise en page plus attrayante et dynamique. Afin d'utiliser la classe « diagonal-fractions » avec un état dans Tailwind, la syntaxe suivante est utilisée :
{ État } : fraction diagonaleL'état par défaut fourni par Tailwind est le suivant :
- Flotter: Lorsque l'utilisateur passe le curseur sur l'élément.
- Se concentrer: Lorsque l'utilisateur se concentre sur un élément en y accédant.
- Actif: Lorsque l'utilisateur active un élément en cliquant dessus.
- Désactiver: Lorsque l'utilisateur n'est pas autorisé à activer un élément.
La démonstration ci-dessous fournit un exemple pratique d’utilisation du « fractions diagonales 'classe avec le' flotter » indique dans Tailwind :
< div classe = 'bg-slate-200 text-center text-lg survol : fractions diagonales' >3/4, 7/8, 5/4, 6/5
< / div >
Le ' div L'élément ' dans le code ci-dessus est fourni par un ' survol : fractions diagonales ' classe qui changera la police normale des nombres de fractions en police de fraction diagonale.
Sortir
Comme vous pouvez le voir dans le résultat, la police numérique du numéro de fraction change lorsque l'utilisateur passe le curseur de la souris dessus :
Il s’agit d’utiliser la classe de fraction diagonale dans Tailwind CSS.
Conclusion
Pour utiliser les fractions diagonales dans Tailwind CSS, utilisez le ' fraction diagonale ' classe. Cette classe séparera le numérateur et le dénominateur par une barre oblique et les rendra petits. Les utilisateurs peuvent également utiliser la classe « diagonal-fractions » avec les points d'arrêt et les états par défaut dans Tailwind pour rendre la conception plus dynamique. Cet article a fourni la procédure d'utilisation des fractions diagonales dans Tailwind.