Ancak bu makale orantılı rakamlar ve tablo şeklinde rakamlar olan iki spesifik sınıf üzerinde duracaktır. Bunlar, Tailwind'deki sayısal değerleri biçimlendirmek ve sayısal verileri belgenin tasarımına çekici gelecek şekilde düzenlemek ve temsil etmek için kullanılır.
Bu makale, aşağıdaki taslağı kullanarak Tailwind CSS'deki orantılı ve tablosal rakamları detaylandıracaktır:
- Tailwind CSS'de Orantılı Rakamlar Nasıl Kullanılır?
- Tailwind CSS'de Tablo Şekilleri Nasıl Kullanılır?
- Orantılı ve Tablo Şekilleri Arasındaki Fark
Tailwind CSS'de Orantılı Rakamlar Nasıl Kullanılır?
Orantılı rakamlar sınıfı, öğeye her sayının aynı genişliğe sahip olmadığı bir kural atayacaktır.
Sözdizimi
Tailwind'de orantılı rakamları kullanmanın sözdizimi aşağıdaki gibidir:
< div sınıf = 'orantılı sayılar' >
< div / >
Yukarıda verilen sözdiziminde, “ orantılı sayılar Orantılı rakamların kullanılabilmesi için elemana sınıfın sağlanması gerekmektedir.
Orantılı rakamların pratik bir örneğini görelim.
Aşağıda verilen kodda iki “ P ' öğeleri bir ' içinde yer alır div Orantılı rakamlar sınıfını kullanan eleman:
< div sınıf = ' orantılı-sayılar metin merkezi bg-slate-200 text-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Yukarıda verilen kodun açıklaması şu şekildedir:
- “ div ” öğesi “'yi kullanır orantılı sayılar Orantılı şekil özelliğini sayılara uygulayacak sınıf.
- “ metin merkezi ” sınıfı metni öğenin ortasına konumlandırır.
- “ bg-{renk}-{sayı} ” sınıfı, öğenin arka plan renginden sorumludur.
- “ metin-xl ” sınıfı, metin için ekstra büyük bir yazı tipi boyutu sağlar.
- Sonra iki ' P ” farklı sayılar içeren öğeler oluşturulur.
Çıktı
Çıktıda ikinci sayının olduğu görülüyor” P ” elemanı birinciye göre biraz daha geniş bir genişliğe sahiptir. Bunun nedeni orantısal rakamlar sınıfından kaynaklanmaktadır:
Tailwind CSS'de Tablo Şekilleri Nasıl Kullanılır?
Tailwind'deki tablo şeklindeki şekiller, her sayının aynı genişlik boyutuna sahip olduğu bir öğeye kural atar. Bu, sayıların simetrik tablo benzeri bir temsilini oluşturur.
Sözdizimi
Tablo şekillerini kullanmanın sözdizimi aşağıdaki gibidir:
< div sınıf = 'tablo-numaralar' >< div / >
Yukarıda verilen sözdiziminde, “ tablo numaraları Tablo şekillerini kullanabilmek için elemana sınıf verilmiştir.
Şimdi nasıl olduğunu görelim tablo numaraları ” bir HTML belgesindeki sayısal değerleri etkiler. Bu gösteri için iki ' P ” sayısal değerlerle oluşturulur ve bir “ içinde yer alır div ” tablo şekilleri sınıfını kullanan öğe:
< div sınıf = ' tablo-nums metin merkezi bg-slate-200 metin-xl' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Yukarıdaki kodda “ tablo numaraları “ sınıfı “ div “Çocuğa tablo şekillerinin stilini atayacak öğe” P ' elementler.
Çıktı:
Yukarıdaki çıktıda, rakamların genişlik boyutlarının aynı olması nedeniyle her iki öğedeki sayısal değerlerin mükemmel şekilde hizalandığı görülebilir.
Bonus Bilgisi: Tailwind CSS'de Orantılı ve Tablo Şekilleri Arasındaki Fark
Tablo ve orantısal rakamlar sınıflarının sayısal değerler üzerindeki etkisini farklılaştıran bir gösteri izleyelim. Bu gösterimde, öğelere varsayılan olarak orantısal sayılar sınıfı atanacaktır. Daha sonra, fareyle üzerine gelme durumu kullanılarak öğelere tablo şekilleri sınıfı atanacaktır:
< div sınıf = ' orantılı-sayılar text-center bg-slate-200 text-xl vurgulu:tabular-nums' >< P > 121212 < / P >
< P > 838383 < / P >
< / div >
Yukarıdaki kodda görüldüğü gibi “ div ” elemanı “ ile sağlanır orantılı sayılar ”, sayısal değerlerin izleyeceği varsayılan kural olacaktır.
Benzer şekilde “ fareyle üzerine gelin:tablo-sayılar ” sınıfında, kullanıcı fare imlecini “div” öğesinin üzerine getirdiğinde sayısal değerler tablo şeklinde rakamlar kuralını izleyecektir.
Çıktı
Verilen çıktıda, kullanıcı fareyi öğenin üzerine getirdiğinde sayısal değerlerin genişliği değişir. Bu, Tailwind'deki orantısal ve tablosal rakamlar arasındaki görsel farkı sağlar:
Bunların hepsi Tailwind'deki orantılı ve tablosal rakamlarla ilgilidir.
Çözüm
Tailwind'de orantılı rakamları kullanmak için ' orantılı sayılar ” sınıfı kullanılıyor. Orantılı rakamlar, her sayısal değerin farklı bir genişlik boyutuna sahip olduğu kuralı kullanır. Tailwind'deki tablo şekillerini kullanmak için “ tablo numaraları ” sınıfı kullanılıyor. Tablolu şekiller, her sayısal değerin aynı genişlik boyutuna sahip olduğu kuralı kullanır. Bu makale Tailwind'de orantısal ve tablosal rakamları kullanma prosedürünü sağlamıştır.