Kako koristiti proporcionalne i tablične figure u Tailwindu?

Međutim, ovaj će članak razraditi dvije specifične klase, a to su proporcionalne figure i tablične figure. Oni se koriste za stiliziranje numeričkih vrijednosti u Tailwindu i raspoređivanje i predstavljanje numeričkih podataka na način koji je privlačan dizajnu dokumenta.

Ovaj će članak razraditi proporcionalne i tablične figure u Tailwind CSS-u koristeći sljedeći pregled:

• Kako koristiti proporcionalne figure u Tailwind CSS-u?
• Kako koristiti tablične figure u Tailwind CSS-u?
• Razlika između proporcionalnih i tabličnih likova

Kako koristiti proporcionalne figure u Tailwind CSS-u?

Klasa proporcionalnih figura dodijelit će elementu konvenciju prema kojoj svaki broj nema istu širinu.

Sintaksa

Sintaksa za korištenje proporcionalnih figura u Tailwindu je sljedeća:

U gore navedenoj sintaksi, ' proporcionalno-br ” elementu se mora osigurati klasa za korištenje proporcionalnih figura.

Pogledajmo praktičan primjer proporcionalnih figura.

U donjem kodu dva ' str ' elementi su sadržani u ' div ” element koji koristi klasu proporcionalnih figura:

Objašnjenje gore navedenog koda je sljedeće:

• ' div ' element koristi ' proporcionalno-br ” koja će primijeniti svojstvo proporcionalne figure na brojeve.
• ' tekst-centar ” klasa postavlja tekst u središte elementa.
• ' bg-{boja}-{broj} ” klasa je odgovorna za boju pozadine elementa.
• ' tekst-xl ” klasa daje posebno veliku veličinu fonta za tekst.
• Dalje, dva “ str ” stvaraju se elementi koji sadrže različite brojeve.

Izlaz

U izlazu se može vidjeti da brojevi u drugom ' str ” ima nešto veću širinu od prvog. To je zbog klase proporcionalnih figura:

Kako koristiti tablične figure u Tailwind CSS-u?

Tablične brojke u Tailwindu dodjeljuju konvenciju elementu gdje svaki broj ima istu širinu. Ovo stvara simetričan prikaz brojeva poput tablice.

Sintaksa

Sintaksa za korištenje tabelarnih slika je sljedeća:

U gore navedenoj sintaksi, ' tablični brojevi ” elementu se daje klasa za korištenje tabličnih slika.

Pogledajmo kako ' tablični brojevi ” utječu na numeričke vrijednosti u HTML dokumentu. Za ovu demonstraciju dva ' str ' s numeričkim vrijednostima stvaraju se i nalaze u ' div ” element koji koristi klasu tabličnih slika:

U gornjem kodu, ' tablični brojevi ” klasa se pruža “ div ” element koji će dodijeliti stil tabelarnih slika djetetu “ str ' elementi.

Izlaz:

Može se vidjeti u gornjem izlazu da su numeričke vrijednosti u oba elementa savršeno usklađene zbog iste širine veličina znamenki.

Dodatne informacije: razlika između proporcionalnih i tabelarnih figura u Tailwind CSS-u

Pogledajmo demonstraciju koja razlikuje učinak klasa tabličnih i proporcionalnih figura na numeričke vrijednosti. U ovoj demonstraciji, elementima će biti dodijeljena klasa proporcionalnih figura kao zadana. Zatim će, koristeći stanje lebdenja, elementima biti dodijeljena klasa tabličnih slika:

U gornjem kodu se može vidjeti da je ' div ' element je opremljen sa ' proporcionalno-br “, što će biti zadana konvencija koju će pratiti numeričke vrijednosti.

Slično, zbog „ lebdjeti:tabular-nums ”, numeričke vrijednosti slijedit će konvenciju tabličnih slika kad god korisnik zadrži kursor miša iznad elementa “div”.

Izlaz

U danom izlazu, širina numeričkih vrijednosti mijenja se kada korisnik prijeđe pokazivačem miša preko elementa. Ovo daje vizualnu razliku između proporcionalnih i tabelarnih brojki u Tailwindu:

To je sve o proporcionalnim i tabličnim figurama u Tailwindu.

Zaključak

Za korištenje proporcionalnih figura u Tailwindu, ' proporcionalno-br ” koristi se klasa. Proporcionalne figure koriste konvenciju prema kojoj svaka numerička vrijednost ima različitu veličinu širine. Za korištenje tabelarnih slika u Tailwindu, ' tablični brojevi ” koristi se klasa. Tablične slike koriste konvenciju prema kojoj svaka numerička vrijednost ima istu širinu. Ovaj članak pruža postupak za korištenje proporcionalnih i tabelarnih slika u Tailwindu.