Tämä artikkeli selittää, kuinka diagonaalimurtolukuja käytetään Tailwindissä.
Kuinka käyttää diagonaalisia murtolukuja Tailwind CSS:ssä?
Tailwindin diagonaalinen murtolukuluokka on ennalta määritetty numeerinen kirjasinmuunnelma, joka pienentää osoittajaa ja nimittäjää ja erottaa ne kauttaviivalla. Tämä saa murto-osan numeron näyttämään erottuvalta muusta tekstistä.
Syntaksi
Syntaksi ' diagonaalimurtoluvut ”luokka on seuraava:
< div luokkaa = 'diagonaalimurtoluvut' >
< div / >
Kuten yllä olevasta syntaksista näet, kehittäjän on annettava ' diagonaalimurtoluvut ' kohdassa ' luokkaa ” elementin attribuutti.
Käytännön esimerkkinä käytetään 'diagonal-fractions' -luokkaa. Alla olevassa esittelyssä käyttäjä näkee eron normaalien murto- ja diagonaalimurtolukujen välillä:
< div luokkaa = 'bg-slate-200 text-center text-lg' >< s >Normaalit murtoluvut: 3 / 5 6 / 3 6 / 5 < / s >
< s luokkaa = 'diagonaalimurtoluvut' >Diagonaaliset murtoluvut: 3 / 5 6 / 3 6 / 5 < / s >
< / div >
Yllä olevan koodin selitys on seuraava:
- ' div ' -elementti luodaan ja annetaan taustaväriksi käyttämällä ' bg-{väri}-{numero} ”luokka.
- Tämän jälkeen tekstille annetaan suuri fonttikoko ja se tasataan elementin keskelle ' teksti-lg ' ja ' tekstikeskus ”luokat vastaavasti.
- Seuraavaksi kaksi' '-elementtejä luodaan, jolloin toinen on varustettu ' diagonaalimurtoluvut ”luokka.
Lähtö:
Ero lävistäjän ja normaalin murto-osan välillä näkyy selvästi yllä olevassa tulosteessa.
Diagonaalisen murtoluvun käyttäminen taitepisteiden kanssa
Katkaisupisteitä käytetään mediakyselyinä Tailwindissä. Oletusarvoisia keskeytyskohtia on viisi määritetyllä vähimmäisleveydellä. Näitä keskeytyskohtia voidaan käyttää missä tahansa Tailwindin luokassa luomaan reagoivia ja dynaamisia suunnitteluasetteluja.
Käyttääksesi ' diagonaalimurtoluvut ” luokka, jossa on tailwind-katkospiste, käytetään seuraavaa syntaksia:
{ keskeytyskohdan etuliite } : diagonaalinen murto-osaAlla olevassa taulukossa on vähimmäisleveys eri tailwind-katkospisteille:
| Katkopisteen etuliite | Minimi leveys |
|---|---|
| sm | 640 pikseliä |
| md | 768 pikseliä |
| lg | 1024 pikseliä |
| xl | 1280 pikseliä |
| 2xl | 1536 pikseliä |
Käytä keskeytyskohtia ' diagonaalimurtoluvut ” luokkaa ymmärtääksesi niiden käytön käytännössä:
< div luokkaa = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
Yllä annetussa koodissa div-elementti on annettu ' md:diagonal-fractions ' -luokka, joka muuttaa numeeristen murtolukujen fontin, kun ' md ”katkospiste on saavutettu.
Lähtö
Kuten tulosteessa näkyy, murtoluvut annetaan diagonaalisen murto-fontin kanssa, kun ' md ”katkospiste saavutettu:
Diagonaalisen murto-osan käyttäminen myötätuulen tilojen kanssa
Tailwind tarjoaa oletuksena ' valtioita ', jotta elementille saadaan suunnitteluominaisuuksia, kun kyseinen tila laukeaa. Tämä tekee suunnittelusta houkuttelevamman ja dynaamisemman. 'Diagonal-fractions' -luokan käyttämiseksi Tailwindin tilassa käytetään seuraavaa syntaksia:
{ osavaltio } : diagonaalinen murto-osaTailwindin tarjoama oletustila on seuraava:
- Vie hiiri: Kun käyttäjä vie hiiren osoittimen elementin päälle.
- Painopiste: Kun käyttäjä keskittyy elementtiin navigoimalla siihen.
- Aktiivinen: Kun käyttäjä aktivoi elementin napsauttamalla sitä.
- Poista käytöstä: Kun käyttäjä ei saa aktivoida elementtiä.
Alla oleva esittely tarjoaa käytännön esimerkin ' diagonaalimurtoluvut ' luokka ' leijuu ”tila Tailwindissä:
< div luokkaa = 'bg-slate-200 text-center text-lg hover:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
' div '-elementti yllä olevassa koodissa saadaan ' hover:diagonal-fractions ” luokka, joka muuttaa murtolukujen normaalin fontin diagonaalimurto-fontiksi.
Lähtö
Kuten tulosteessa näkyy, murto-osan numeron fontti muuttuu, kun käyttäjä vie hiiren osoittimen sen päälle:
Siinä on kyse diagonaalimurto-luokan käytöstä Tailwind CSS:ssä.
Johtopäätös
Jos haluat käyttää diagonaalimurtolukuja Tailwind CSS:ssä, käytä ' diagonaalinen murto-osa ”luokka. Tämä luokka erottaa osoittajan ja nimittäjän kauttaviivalla ja tekee niistä pieniä. Käyttäjät voivat myös käyttää 'diagonal-fractions' -luokkaa Tailwindin oletuskatkaisupisteiden ja -tilojen kanssa tehdäkseen suunnittelusta dynaamisemman. Tässä artikkelissa on esitetty menetelmä diagonaalimurtolukujen käyttämiseksi Tailwindissä.