Bir kullanıcının web sayfası için bir öğe listesi oluşturması gerektiğini varsayalım. Tasarım sürecini kolaylaştırmak için Tailwind, liste öğelerinin türünü, konumunu ve hizalamasını değiştirmek için kullanılabilecek çeşitli liste stili sınıfları sağlar.
Bu makale Tailwind'de liste stili türünü ayarlama prosedürünü sağlayacaktır.
Tailwind'de Liste Stili Türü Nasıl Ayarlanır?
Tailwind üç varsayılan liste stili türü sağlar. “ sağlamak için kullanılırlar. işaretleyici Liste öğeleri için ” stili. Üç varsayılan liste stili türü sınıfı aşağıda açıklanmaktadır:
- liste diski: Bu sınıf, liste işaretçisi olarak yuvarlak madde işaret noktalarını sağlayacaktır.
- liste-ondalık: Bu sınıf, liste işaretçisi olarak ondalık sayıları sağlayacaktır.
- liste-yok: Bu sınıf, öğelerdeki tüm liste işaretçilerini kaldıracaktır.
Liste stili türlerini kullanmanın sözdizimi aşağıdaki gibidir:
< ul sınıf = 'liste biçimi}' > < / ul >
Daha iyi anlaşılması için, aşağıda sağlanan gösterim, liste öğelerine farklı işaretleyici stilleri sağlamak amacıyla yukarıda tanımlanan sözdizimini kullanacaktır. Bu örnekte, Tailwind'deki varsayılan liste stili sınıfları kullanılarak üç liste öğesi oluşturulacak ve farklı işaretleyici stilleri sağlanacak:
< P sınıf = 'metin merkezi metin-xl yazı tipi-kalın' >Varsayılan Farklı Liste Stil Tailwind'deki Türler< / P >
< br >
< div sınıf = 'esnek yaslama-merkez alanı-x-20 bg-slate-100 yuvarlak-lg mx-4 p-2' >
< ul sınıf = 'disk listesi' >
LİSTE # 1
< O >Bu İlk Ürün< / O >
< O >Bu İkinci Öğedir< / O >
< O >Bu Üçüncü Öğedir< / O >
< / ul >
< ul sınıf = 'liste-ondalık' >
LİSTE # 2
< O >Bu İlk Ürün< / O >
< O >Bu İkinci Öğedir< / O >
< O >Bu Üçüncü Öğedir< / O >
< / ul >
< ul sınıf = 'liste-yok' >
LİSTE # 3
< O >Bu İlk Ürün< / O >
< O >Bu İkinci Öğedir< / O >
< O >Bu Üçüncü Öğedir< / O >
< / ul >
< / div >
Yukarıdaki kodun açıklaması şu şekildedir:
- A ' ” öğesi bir “ ile oluşturulur XL ” yazı tipi boyutu ve bir “ gözü pek ” yazı tipi ağırlığı. Öğenin metin içeriği “” kullanılarak merkeze konumlandırılır. metin merkezi ' sınıf.
- Bir satır sonundan sonra bir “ ” öğesi oluşturulur ve bir “ ile sağlanır esnek ' sınıf. Bu, alt öğeleri yatay olarak hizalayacak bir kap oluşturacaktır.
- “ iki yana yasla-merkez ” sınıfı eşyaları konteynerin ortasına yerleştirecektir.
- “ boşluk-x-{boyut} ” sınıfı öğeler arasındaki yatay boşluğu sağlar.
- “ bg-{renk}-{sayı} ” sınıfı kabın arka planını belirtilen renge ayarlar.
- “ yuvarlak-lg ” sınıfı kabın köşelerini yuvarlatır.
- “ mx-4 ” sınıfı esnek konteynere yatay kenar boşluğu sağlar.
- “ s-2 ” sınıfı esnek konteynere dolgu sağlar.
- Daha sonra üç liste öğesi oluşturulur ve “” kullanılarak farklı liste stili türleri sağlanır. liste-{tip} ' sınıf.
Çıktı:
Aşağıdaki çıktıdan, ilk listenin madde işaretlerini kullandığı, ikinci listenin ondalık sayıları kullandığı ve üçüncü listenin herhangi bir öğe işaretçisi kullanmadığı görülebilir.
Tailwind'de Durum Değişkenleriyle Liste Stili Sınıfını Kullanma
Liste stili sınıfı, tasarımı daha dinamik hale getirmek için Tailwind'deki varsayılan durum değişkenleriyle birlikte kullanılabilir. Fareyle üzerine gelme, odaklanma ve etkin durum değişkenlerini kullanarak kullanıcı, belirtilen durum tetiklendiğinde liste öğelerinin işaretçi stilini değiştirebilir. Liste stili sınıfını durum değişkenleriyle kullanmaya ilişkin sözdizimi aşağıdaki gibidir:
< ul sınıf = '{durum}:liste-{stil}...' > < / ul >Kullanıcının liste bloğunun üzerine gelerek işaretleyici stilini değiştirebildiği liste stili tipini 'üzerinde kalma' durumuyla kullanmanın bir örneği:
< P sınıf = 'metin merkezi metin-xl yazı tipi-kalın' >İşaretçi Stilini Değiştirmek için İmleci Liste Bloğunun Üzerine Getirin< / P >
< br >
< div sınıf = 'esnek yaslama-merkez alanı-x-20 bg-slate-100 yuvarlak-lg mx-4 p-2' >
< ul sınıf = 'liste-disk üzerine gelme:liste-ondalık' >
LİSTE # 1
< O >Bu İlk Ürün< / O >
< O >Bu İkinci Öğedir< / O >
< O >Bu Üçüncü Öğedir< / O >
< / ul >
< / div >Yukarıdaki kodda liste “” ile sağlanmaktadır. liste diski ” sınıfını varsayılan liste stili türü olarak kullanın. Ancak “kullanarak fareyle üzerine gelin: liste-ondalık ” sınıfında, kullanıcı fare imlecini liste bloğunun üzerine getirdiğinde liste stili türü değişecektir.
Çıktı:
Aşağıdaki çıktı, imleç liste bloğunun üzerine getirildiğinde liste türü stilinin madde işaretli listeden numaralı listeye değiştiğini gösterir.
Tailwind'de Kesme Noktalarıyla Liste Stili Sınıfını Kullanma
Kesme noktaları, farklı ekran boyutlarına yönelik düzenin duyarlı tasarımı için kullanılır. Tailwind tarafından sağlanan beş varsayılan kesme noktası sm, md, lg, xl ve 2xl'dir. Liste tipi stil sınıfına bir kesme noktası sağlamak için aşağıdaki sözdizimi kullanılır:
< ul sınıf = '{breakpoint}:liste-{stil}...' > < / ul >Liste stili türünün ' ile kullanılmasına bir örnek: MD ” kesme noktası, burada ekran boyutu “md” kesme noktasına ulaştığında işaretleyici stili değişecektir:
< P sınıf = 'metin merkezi metin-xl yazı tipi-kalın' >Ekranı Büyüt Boyut İşaretçi Stilini Değiştirmek İçin< / P >
< br >
< div sınıf = 'esnek yaslama-merkez alanı-x-20 bg-slate-100 yuvarlak-lg mx-4 p-2' >
< ul sınıf = 'liste-disk md:liste-ondalık' >
LİSTE # 1
< O >Bu İlk Ürün< / O >
< O >Bu İkinci Öğedir< / O >
< O >Bu Üçüncü Öğedir< / O >
< / ul >
< / div >Yukarıdaki kodda liste “” ile sağlanmaktadır. liste diski ” sınıfını varsayılan stil olarak kullanın. Ancak “kullanarak md:liste-ondalık ” sınıfının liste stili türü “md” ekran boyutuna göre değişecektir.
Çıktı:
Aşağıdaki çıktıda görebileceğiniz gibi, ekran boyutu “” değerine ulaştığında liste stili türü diskten ondalık sayıya değişir. MD ” kesme noktası.
Bu tamamen Tailwind'de Liste Stili Türünü ayarlamakla ilgilidir.
Çözüm
Tailwind, bir öğenin listeleme stilini değiştirmek için önceden tanımlanmış üç liste stili türü sınıfı sağlar. “ liste diski ” sınıfı, öğeleri listelemek için madde işaretleri sağlar. “ liste-ondalık ” sınıfı, öğeleri listelemek için sayıları sağlar. “ liste-yok ” sınıfı herhangi bir öğe işaretçisi kullanmayan bir liste oluşturur. Bu makalede, Tailwind'de liste stili türünü ayarlama yordamı sağlanmıştır.