Denne artikel vil forklare, hvordan man bruger diagonale brøker i Tailwind.
Hvordan bruger man diagonale brøker i medvinds-CSS?
Diagonalbrøkklassen i Tailwind er en foruddefineret numerisk skrifttypevariant, der gør tælleren og nævneren mindre og adskiller dem med en skråstreg. Dette får brøktallet til at virke adskilt fra resten af teksten.
Syntaks
Syntaksen ved at bruge ' diagonal-brøker klasse er som følger:
< div klasse = 'diagonal-brøker' >
< div / >
Som du kan se fra ovenstående syntaks, skal udvikleren give ' diagonal-brøker ' i ' klasse elementets attribut.
Lad os bruge klassen 'diagonal-brøker' som et praktisk eksempel. I nedenstående demonstration kan brugeren se forskellen mellem normalbrøkerne og diagonalbrøkerne:
< div klasse = 'bg-slate-200 text-center text-lg' >< s > Normale brøker: 3 / 5 6 / 3 6 / 5 < / s >
< s klasse = 'diagonal-brøker' >Diagonale brøker: 3 / 5 6 / 3 6 / 5 < / s >
< / div >
Forklaringen af ovenstående kode er som følger:
- Det ' div '-element oprettes og leveres som baggrundsfarve ved hjælp af ' bg-{color}-{number} ' klasse.
- Derefter får teksten en stor skriftstørrelse og justeres til midten af elementet ved hjælp af ' tekst-lg ' og ' tekst-center ” klasser hhv.
- Dernæst to ' ' elementer oprettes, hvor det andet er forsynet med ' diagonal-brøker ' klasse.
Produktion:
Forskellen mellem diagonalbrøken og normalbrøken kan tydeligt ses i ovenstående output.
Brug af diagonalbrøkklasse med brudpunkter
Brydpunkterne bruges som medieforespørgsler i Tailwind. Der er fem standardbrudpunkter med specificerede minimumsbredder. Disse brudpunkter kan bruges med enhver klasse i Tailwind til at skabe responsive og dynamiske designlayouts.
For at bruge ' diagonal-brøker ” klasse med et breakpoint i Tailwind, bruges følgende syntaks:
{ brudpunktspræfiks } : diagonal-brøkNedenstående tabel angiver minimumsbredden for forskellige brudpunkter i Tailwind:
| Breakpoint præfiks | Minimum bredde |
|---|---|
| sm | 640px |
| md | 768 pixels |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536 pixels |
Lad os bruge brudpunkter med ' diagonal-brøker klasse for praktisk at forstå deres brug:
< div klasse = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
I den ovenfor angivne kode er der angivet et div-element i ' md: diagonal-brøker ' klasse, der vil ændre skrifttypen for de numeriske brøker, når ' md ” brudpunktet er nået.
Produktion
Som du kan se i outputtet, er brøktallene forsynet med den diagonale brøkskrift, når ' md ” brudpunkt er nået:
Brug af diagonalbrøkklassen med medvindstilstande
Medvind giver standard ' stater ” for at give designegenskaber til et element, når den specifikke tilstand udløses. Dette gør designlayoutet mere tiltalende og dynamisk. For at bruge klassen 'diagonal-brøker' med en tilstand i Tailwind, bruges følgende syntaks:
{ stat } : diagonal-brøkStandardtilstanden leveret af Tailwind er som følger:
- Hold musen over: Når brugeren holder markøren over elementet.
- Fokus: Når brugeren fokuserer på et element ved at navigere til det.
- Aktiv: Når brugeren aktiverer et element ved at klikke på det.
- Deaktiver: Når brugeren ikke må aktivere et element.
Nedenstående demonstration giver et praktisk eksempel på brug af ' diagonal-brøker ' klasse med ' svæve ” stat i Tailwind:
< div klasse = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
Det ' div ' element i ovenstående kode er leveret af en ' hover: diagonal-brøker ” klasse, der vil ændre den normale skrifttype for brøktallene til den diagonale brøkskrift.
Produktion
Som du kan se i outputtet, ændres den numeriske skrifttype for brøktallet, når brugeren holder musemarkøren over det:
Det handler om at bruge diagonalbrøkklassen i Tailwind CSS.
Konklusion
For at bruge diagonalbrøkerne i Tailwind CSS, skal du bruge ' diagonal-brøk ' klasse. Denne klasse vil adskille tælleren og nævneren med en skråstreg og gøre dem små. Brugere kan også bruge klassen 'diagonal-brøker' med standard breakpoints og tilstande i Tailwind for at gøre designet mere dynamisk. Denne artikel har angivet proceduren for brug af diagonalbrøkerne i Tailwind.