Ez a cikk elmagyarázza, hogyan kell használni az átlós törteket a Tailwindben.
Hogyan használjunk átlós törteket a Tailwind CSS-ben?
A Tailwind átlós törtosztálya egy előre meghatározott numerikus betűtípus-változat, amely kicsinyíti a számlálót és a nevezőt, és perjellel választja el őket. Emiatt a törtszám megkülönböztetőnek tűnik a szöveg többi részétől.
Szintaxis
A „ átló-törtek ” osztály a következő:
< div osztály = 'átlós törtek' >
< div / >
Amint a fenti szintaxisból látható, a fejlesztőnek meg kell adnia a „ átló-törtek ' ban,-ben ' osztály ” elem attribútuma.
Gyakorlati példaként használjuk az „átló-törtek” osztályt. Az alábbi bemutatón a felhasználó láthatja a különbséget a normál és az átlós törtek között:
< div osztály = 'bg-slate-200 text-center text-lg' >< p > Normál törtek: 3 / 5 6 / 3 6 / 5 < / p >
< p osztály = 'átlós törtek' >Diagonális törtek: 3 / 5 6 / 3 6 / 5 < / p >
< / div >
A fenti kód magyarázata a következő:
- A ' div ' elem jön létre, és háttérszínként a ' bg-{color}-{number} ' osztály.
- Ezután a szöveg nagy betűméretet kap, és az elem közepéhez igazodik a „ szöveg-lg ” és „ szövegközpont ” osztályok, ill.
- Ezután két' ” elemek jönnek létre, ahol a második a „ átló-törtek ' osztály.
Kimenet:
Az átlós tört és a normál tört közötti különbség jól látható a fenti kimeneten.
Átlós tört osztály használata töréspontokkal
A töréspontok médialekérdezésekként használatosak a Tailwindben. Öt alapértelmezett töréspont van meghatározott minimális szélességgel. Ezek a töréspontok a Tailwind bármely osztályával használhatók érzékeny és dinamikus tervezési elrendezések létrehozására.
A „ átló-törtek ” osztály egy törésponttal a Tailwindben, a következő szintaxist használjuk:
{ töréspont előtag } : átló-törtAz alábbi táblázat tartalmazza a minimális szélességet a hátszél különböző töréspontjaihoz:
| Töréspont előtag | Minimális szélesség |
|---|---|
| sm | 640 képpont |
| md | 768 képpont |
| lg | 1024 képpont |
| xl | 1280 képpont |
| 2xl | 1536 képpont |
Használjunk töréspontokat a ' átló-törtek ” osztályban, hogy gyakorlatilag megértsük a használatukat:
< div osztály = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
A fent megadott kódban egy div elem található a „ md:diagonal-fractions ' osztály, amely megváltoztatja a numerikus törtek betűtípusát, amikor a ' md ” töréspont elérve.
Kimenet
Amint a kimeneten látható, a tört számok átlós tört betűkészlettel vannak ellátva, amikor a „ md ” töréspont elérve:
Az átlós tört osztály használata hátszél állapotokkal
Tailwind az alapértelmezett ' Államok ” annak érdekében, hogy tervezési tulajdonságokat biztosítson egy elemnek, amikor az adott állapot aktiválódik. Ez vonzóbbá és dinamikusabbá teszi a tervezési elrendezést. A „diagonal-fractions” osztály használatához egy állapottal a Tailwindben a következő szintaxist kell használni:
{ állapot } : átló-törtA Tailwind által biztosított alapértelmezett állapot a következő:
- Lebeg: Amikor a felhasználó az egérmutatót az elem fölé viszi.
- Fókusz: Amikor a felhasználó egy elemre fókuszál a hozzá navigálva.
- Aktív: Amikor a felhasználó rákattintással aktivál egy elemet.
- Letiltása: Amikor a felhasználó nem aktiválhat egy elemet.
Az alábbi bemutató gyakorlati példát ad a „ átló-törtek ' osztály a ' lebeg ” állapot a Tailwindben:
< div osztály = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
A ' div ' elemet a fenti kódban egy ' hover:diagonal-fractions ” osztály, amely a törtszámok normál betűtípusát átlós tört betűtípusra változtatja.
Kimenet
Amint a kimeneten látható, a törtszám numerikus betűtípusa megváltozik, ahogy a felhasználó az egérmutatót fölé viszi:
Ez minden az átlós tört osztály használatáról szól a Tailwind CSS-ben.
Következtetés
Az átlós törtek használatához a Tailwind CSS-ben használja a „ átló-tört ' osztály. Ez az osztály perjellel választja el a számlálót és a nevezőt, és kicsinyíti őket. A felhasználók használhatják a „diagonal-fractions” osztályt is a Tailwind alapértelmezett töréspontjaival és állapotaival, hogy dinamikusabbá tegyék a tervezést. Ez a cikk bemutatja az átlós törtek használatának eljárását a Tailwindben.