Bu makale Tailwind'de köşegen kesirlerin nasıl kullanılacağını açıklayacaktır.
Tailwind CSS'de Çapraz Kesirler Nasıl Kullanılır?
Tailwind'deki çapraz kesir sınıfı, pay ve paydayı küçülten ve bunları eğik çizgiyle ayıran, önceden tanımlanmış bir sayısal yazı tipi çeşididir. Bu, kesir sayısının metnin geri kalanından farklı görünmesini sağlar.
Sözdizimi
“ kullanmanın sözdizimi köşegen kesirler ” sınıfı aşağıdaki gibidir:
< div sınıf = 'köşegen kesirler' >
< div / >
Yukarıdaki sözdiziminden görebileceğiniz gibi, geliştiricinin şunları sağlaması gerekir: köşegen kesirler ' içinde ' sınıf ” öğenin niteliği.
Pratik bir örnek olarak 'köşegen kesirler' sınıfını kullanalım. Aşağıdaki gösterimde kullanıcı normal kesirler ile köşegen kesirler arasındaki farkı görebilir:
< div sınıf = 'bg-slate-200 metin merkezi metni-lg' >< P >Normal Kesirler: 3 / 5 6 / 3 6 / 5 < / P >
< P sınıf = 'köşegen kesirler' >Köşegen Kesirler: 3 / 5 6 / 3 6 / 5 < / P >
< / div >
Yukarıdaki kodun açıklaması şu şekildedir:
- “ div ” öğesi, “ kullanılarak arka plan rengi olarak oluşturulur ve sağlanır. bg-{renk}-{sayı} ' sınıf.
- Daha sonra metne büyük bir yazı tipi boyutu sağlanır ve “” kullanılarak öğenin merkezine hizalanır. metin-lg ' Ve ' metin merkezi ” sınıfları sırasıyla.
- Sonra iki ' ” elemanları oluşturulur, burada ikincisi “ ile sağlanır köşegen kesirler ' sınıf.
Çıktı:
Çapraz kesir ile normal kesir arasındaki fark yukarıdaki çıktıda açıkça görülmektedir.
Kesme Noktalarıyla Çapraz Kesir Sınıfını Kullanma
Kesme noktaları Tailwind'de medya sorguları olarak kullanılır. Belirtilen minimum genişliklere sahip beş varsayılan kesme noktası vardır. Bu kesme noktaları, duyarlı ve dinamik tasarım düzenleri oluşturmak için Tailwind'deki herhangi bir sınıfla kullanılabilir.
“” seçeneğini kullanmak için köşegen kesirler ” sınıfının Tailwind'de bir kesme noktasına sahip olması durumunda aşağıdaki sözdizimi kullanılır:
{ kesme noktası öneki } : köşegen kesirAşağıdaki tablo Tailwind'deki farklı kesme noktaları için minimum genişliği sağlar:
| Kesme Noktası Öneki | Minimum Genişlik |
|---|---|
| sm | 640 piksel |
| MD | 768 piksel |
| lg | 1024 piksel |
| XL | 1280 piksel |
| 2xl | 1536 piksel |
Kesme noktalarını “ ile kullanalım köşegen kesirler ” sınıfı, bunların kullanımını pratik olarak anlamak için:
< div sınıf = 'bg-slate-200 text-center text-lg md:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
Yukarıda verilen kodda “” içerisinde bir div elemanı sağlanmıştır. md:köşegen kesirler '' olduğunda sayısal kesirlerin yazı tipini değiştirecek 'sınıfı' MD ” kesme noktasına ulaşıldı.
Çıktı
Çıktıda görebileceğiniz gibi kesirli sayılar köşegen kesir yazı tipiyle sağlanmaktadır. MD ” kesme noktasına ulaşıldı:
Arka Rüzgar Durumlarıyla Çapraz Kesir Sınıfını Kullanmak
Tailwind varsayılanı sağlar ' eyaletler ” belirli bir durum tetiklendiğinde bir öğeye tasarım özellikleri sağlamak için. Bu, tasarım düzenini daha çekici ve dinamik hale getirir. Tailwind'de 'diagonal-fractions' sınıfını bir durumla kullanmak için aşağıdaki sözdizimi kullanılır:
{ durum } : köşegen kesirTailwind tarafından sağlanan varsayılan durum aşağıdaki gibidir:
- Fareyle üzerine gelin: Kullanıcı imleci öğenin üzerine getirdiğinde.
- Odak: Kullanıcı bir öğeye giderek o öğeye odaklandığında.
- Aktif: Kullanıcı bir öğeyi tıklatarak etkinleştirdiğinde.
- Devre dışı bırakmak: Kullanıcının bir öğeyi etkinleştirmesine izin verilmediğinde.
Aşağıdaki gösterimde '' ifadesinin kullanımına ilişkin pratik bir örnek sunulmaktadır. köşegen kesirler ' sınıfı' ile ' vurgulu ” Tailwind'deki durum:
< div sınıf = 'bg-slate-200 text-center text-lg vurgulu:diagonal-fractions' >3/4, 7/8, 5/4, 6/5
< / div >
“ div Yukarıdaki koddaki ” elemanı bir “ ile sağlanmaktadır fareyle üzerine gelin:köşegen kesirler Kesir sayılarının normal yazı tipini köşegen kesir yazı tipine değiştirecek olan sınıf.
Çıktı
Çıktıda görebileceğiniz gibi, kullanıcı fare imlecini üzerine getirdiğinde kesir sayısının sayısal yazı tipi değişir:
Bunların hepsi Tailwind CSS'de köşegen kesir sınıfını kullanmakla ilgilidir.
Çözüm
Tailwind CSS'de köşegen kesirleri kullanmak için “ köşegen kesir ' sınıf. Bu sınıf pay ve paydayı eğik çizgi ile ayırıp küçültecektir. Kullanıcılar tasarımı daha dinamik hale getirmek için Tailwind'deki varsayılan kesme noktaları ve durumlarla birlikte 'diagonal-fractions' sınıfını da kullanabilirler. Bu makalede, Tailwind'de köşegen kesirlerin kullanılmasına ilişkin prosedür sağlanmıştır.