Jednakże w tym artykule zostaną omówione dwie konkretne klasy, którymi są figury proporcjonalne i figury tabelaryczne. Służą one do stylizowania wartości numerycznych w Tailwind oraz do porządkowania i przedstawiania danych liczbowych w sposób atrakcyjny dla projektu dokumentu.
W tym artykule omówimy liczby proporcjonalne i tabelaryczne w CSS Tailwind, korzystając z następującego schematu:
- Jak używać liczb proporcjonalnych w CSS Tailwind?
- Jak używać danych tabelarycznych w CSS Tailwind?
- Różnica między liczbami proporcjonalnymi i tabelarycznymi
Jak używać liczb proporcjonalnych w CSS Tailwind?
Klasa figur proporcjonalnych przypisze elementowi konwencję, w której nie każda liczba ma tę samą szerokość.
Składnia
Składnia używania liczb proporcjonalnych w Tailwind jest następująca:
< div klasa = „liczby-proporcjonalne” >
< div / >
W podanej powyżej składni „ liczby proporcjonalne Aby można było używać liczb proporcjonalnych, elementowi należy nadać klasę.
Zobaczmy praktyczny przykład figur proporcjonalnych.
W podanym poniżej kodzie dwa „ P ” elementy są zawarte w „ div ” element wykorzystujący klasę figur proporcjonalnych:
< div klasa = ' proporcjonalne-nums centrum tekstowe bg-slate-200 tekst-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Wyjaśnienie powyższego kodu jest następujące:
- „ div ” wykorzystuje element „ liczby proporcjonalne ”, która zastosuje właściwość figury proporcjonalnej do liczb.
- „ centrum tekstowe ” class umieszcza tekst na środku elementu.
- „ bg-{kolor}-{liczba} ” odpowiada za kolor tła elementu.
- „ tekst-xl ” zapewnia bardzo duży rozmiar czcionki tekstu.
- Następnie dwa „ P ” tworzone są elementy zawierające różne liczby.
Wyjście
Na wynikach widać, że liczby w drugim „ P ” mają nieco większą szerokość niż pierwszy. Wynika to z klasy figur proporcjonalnych:
Jak używać danych tabelarycznych w CSS Tailwind?
Dane tabelaryczne w Tailwind przypisują konwencję do elementu, w którym każda liczba ma tę samą szerokość. Tworzy to symetryczną tabelaryczną reprezentację liczb.
Składnia
Składnia korzystania z liczb tabelarycznych jest następująca:
< div klasa = „numery tabelaryczne” >< div / >
W podanej powyżej składni „ numery tabelaryczne ” Elementowi nadano klasę umożliwiającą korzystanie z danych tabelarycznych.
Przyjrzyjmy się, jak „ numery tabelaryczne ” wpływa na wartości liczbowe w dokumencie HTML. Do tej demonstracji dwóch „ P ” z wartościami numerycznymi są tworzone i zawarte w „ div ” element wykorzystujący klasę figur tabelarycznych:
< div klasa = 'tabulary-nums centrum tekstowe bg-slate-200 tekst-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
W powyższym kodzie „ numery tabelaryczne ” jest przeznaczona dla „ div „element, który nada dziecku styl rycin tabelarycznych” P ' elementy.
Wyjście:
Na powyższym wyjściu widać, że wartości liczbowe w obu elementach są idealnie dopasowane ze względu na tę samą szerokość cyfr.
Informacje dodatkowe: Różnica między liczbami proporcjonalnymi i tabelarycznymi w CSS Tailwind
Obejrzyjmy demonstrację różnicującą wpływ klas figur tabelarycznych i proporcjonalnych na wartości liczbowe. W tej demonstracji elementom zostanie domyślnie przypisana klasa figur proporcjonalnych. Następnie, wykorzystując stan najechania, elementom zostanie przypisana klasa figur tabelarycznych:
< div klasa = ' proporcjonalne-nums centrum tekstowe bg-slate-200 tekst-xl hover:tabular-nums' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
W powyższym kodzie widać, że „ div ” jest wyposażony w element „ liczby proporcjonalne ”, która będzie domyślną konwencją, zgodnie z którą będą stosowane wartości liczbowe.
Podobnie ze względu na „ najedź kursorem:tabele-nums ”, wartości liczbowe będą zgodne z konwencją liczb tabelarycznych za każdym razem, gdy użytkownik najedzie kursorem myszy na element „div”.
Wyjście
W danym wyniku szerokość wartości liczbowych zmienia się, gdy użytkownik najedzie myszką na element. Zapewnia to wizualną różnicę między wartościami proporcjonalnymi i tabelarycznymi w Tailwind:
To wszystko o liczbach proporcjonalnych i tabelarycznych w Tailwind.
Wniosek
Aby używać liczb proporcjonalnych w Tailwind, należy użyć „ liczby proporcjonalne używana jest klasa ”. Liczby proporcjonalne wykorzystują konwencję, w której każda wartość liczbowa ma inny rozmiar szerokości. Aby skorzystać z danych tabelarycznych w Tailwind, należy użyć przycisku „ numery tabelaryczne używana jest klasa ”. W rysunkach tabelarycznych zastosowano konwencję, w której każda wartość liczbowa ma tę samą szerokość. W tym artykule opisano procedurę używania liczb proporcjonalnych i tabelarycznych w Tailwind.