Kaip naudoti proporcingas ir lentelės figūras „Tailwind“?

Tačiau šiame straipsnyje bus nagrinėjamos dvi konkrečios klasės, kurios yra proporcingos ir lentelės. Jie naudojami skaitinėms reikšmėms „Tailwind“ formuoti ir skaitiniams duomenims išdėstyti bei pateikti taip, kad būtų patrauklu dokumento dizainui.

Šiame straipsnyje bus išsamiau aptariamos proporcingos ir lentelės formos Tailwind CSS skaičiai, naudojant šiuos kontūrus:

• Kaip naudoti proporcingas figūras „Tailwind CSS“?
• Kaip naudoti lentelės figūras „Tailwind CSS“?
• Skirtumas tarp proporcinių ir lentelės figūrų

Kaip naudoti proporcingas figūras „Tailwind CSS“?

Proporcinių skaičių klasė elementui priskirs susitarimą, kai kiekvienas skaičius nėra vienodo pločio.

Sintaksė

Tailwind proporcinių skaičių naudojimo sintaksė yra tokia:

Aukščiau pateiktoje sintaksėje „ proporciniai skaičiai “ klasė turi būti pateikta elementui, kad būtų galima naudoti proporcingus skaičius.

Pažiūrėkime praktinį proporcingų skaičių pavyzdį.

Toliau pateiktame kode du „ p “ elementai yra „ div “ elementas, kuris naudoja proporcingų skaičių klasę:

Aukščiau pateikto kodo paaiškinimas yra toks:

• „ div ' elementas naudoja ' proporciniai skaičiai “ klasė, kuri skaičiams taikys proporcingos figūros savybę.
• „ teksto centras “ klasė išdėsto tekstą elemento centre.
• „ bg-{color}-{number} “ klasė yra atsakinga už elemento fono spalvą.
• „ tekstas-xl “ klasė suteikia itin didelį teksto šrifto dydį.
• Toliau du ' p “ sukuriami elementai, kuriuose yra skirtingi skaičiai.

Išvestis

Išvestyje matyti, kad skaičiai antroje ' p “ elemento plotis yra šiek tiek didesnis nei pirmasis. Taip yra dėl proporcinių skaičių klasės:

Kaip naudoti lentelės figūras „Tailwind CSS“?

Tailwind lentelės skaičiai priskiria susitarimą elementui, kuriame kiekvienas skaičius yra vienodo pločio. Taip sukuriamas simetriškas į lentelę panašus skaičių vaizdas.

Sintaksė

Lentelių figūrų naudojimo sintaksė yra tokia:

Aukščiau pateiktoje sintaksėje „ lentelės-numeriai “ klasė yra pateikta elementui, kad būtų galima naudoti lentelės figūras.

Pažiūrėkime, kaip „ lentelės-numeriai “ paveiks skaitines reikšmes HTML dokumente. Šiai demonstracijai du „ p “ su skaitinėmis reikšmėmis sukuriami ir yra „ div “ elementas, kuriame naudojama lentelės figūrų klasė:

Aukščiau pateiktame kode „ lentelės-numeriai “ klasė teikiama „ div “ elementas, kuris vaikui priskirs lentelės figūrų stilių “ p “ elementai.

Išvestis:

Aukščiau pateiktame išvestyje matyti, kad skaitinės reikšmės abiejuose elementuose yra puikiai suderintos, nes skaitmenų plotis yra vienodas.

Papildoma informacija: skirtumas tarp proporcinių ir lentelių figūrų Tailwind CSS

Pažiūrėkime demonstraciją, kuri išskiria lentelių ir proporcingų skaičių klasių poveikį skaitinėms reikšmėms. Šioje demonstracijoje elementams bus priskirta proporcinių skaičių klasė kaip numatytoji. Tada, naudojant pelės žymeklio būseną, elementams bus priskirta lentelės figūrų klasė:

Aukščiau pateiktame kode matyti, kad „ div “ elementas pateikiamas su „ proporciniai skaičiai “, kuris bus numatytasis susitarimas, kuriuo bus vadovaujamasi skaitinėmis reikšmėmis.

Panašiai dėl „ hover:tabular-numeriai “ klasėje, skaitinės reikšmės atitiks lentelių skaičių, kai vartotojas užves pelės žymeklį virš elemento „div“.

Išvestis

Pateiktoje išvestyje skaitinių reikšmių plotis pasikeičia, kai vartotojas užveda pelės žymeklį virš elemento. Tai suteikia vizualų skirtumą tarp proporcingų ir lentelės figūrų Tailwind:

Tai viskas apie proporcingus ir lentelių skaičius „Tailwind“.

Išvada

Norėdami naudoti proporcingas skaičius „Tailwind“, „ proporciniai skaičiai “ naudojama klasė. Proporcingos skaičiai naudoja susitarimą, kai kiekviena skaitinė reikšmė turi skirtingą pločio dydį. Norėdami naudoti lentelės figūras „Tailwind“, „ lentelės-numeriai “ naudojama klasė. Lentelės paveiksluose naudojamas susitarimas, kai kiekviena skaitinė reikšmė yra vienodo pločio. Šiame straipsnyje pateikta proporcinių ir lentelių skaičių naudojimo Tailwind tvarka.