Bu makale Tailwind'de bir liste bloğunun liste stili görüntüsünü ayarlama prosedürünü sağlayacaktır.
Tailwind'de Liste Stili Görüntü Sınıfı Nasıl Ayarlanır?
Liste Stili Görüntü Sınıfı, Tailwind'de liste işaretçisi olarak bir görüntü sağlamak için kullanılır. Varsayılan olarak Tailwind yalnızca “ liste-resim-yok Yalnızca bir liste için önceden ayarlanmış herhangi bir görüntü işaretçisini kaldırmak için kullanılabilen sınıf.
Sözdizimi
Tailwind'de liste stili görüntü sınıfını kullanmanın sözdizimi aşağıdaki gibidir:
< ul sınıf = 'liste-resim-[url({Resim URL'si})]' > < / ul >
Bu sözdizimi, belirtilen görüntüyü liste öğesi için bir işaretleyici olarak sağlar.
< ul sınıf = 'liste-resim-yok' > < / ul >
Bu sözdizimi, bir liste öğesinin işaretçisi olarak önceden ayarlanmış görüntüleri kaldırır.
Sırasız bir listede bir görüntüyü işaretleyici olarak kullanmak için yukarıda tanımlanan sözdizimini kullanalım. Bu gösterimde kullanıcının “adlı bir resmi var. el işaretçisi.png ” aynı Tailwind proje klasörünün içinde mevcut. Görüntünün başka bir klasörde bulunması durumunda kullanıcının liste stili görüntü sınıfının tam yolunu sağlaması gerekir. Bu görseli “list-image” sınıfını kullanarak liste işaretçisi olarak kullanacağız.
< div sınıf = 'esnek yaslama merkezi' >
< ul sınıf = ' list-inside list-image-[url(handpointer.png)] space-y-2 rounded-md bg-green-400 p-2' >
ÖRNEK LİSTE
< 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 oluşturulur ve “ ile sağlanır esnek Bir kapsayıcıdaki öğeleri yatay olarak hizalayan sınıf.
- “ iki yana yasla-merkez ” sınıfı, alt öğeleri kabın merkezine hizalar.
- Daha sonra “
- “ ile sağlanır. liste içi Belirtilen liste öğesi işaretçisini liste bloğunun içine yerleştirecek sınıf.
- “ list-image-[url({Resim URL'si})] ” sınıfı, öğeye liste öğesi işaretçisi olarak bir resim sağlamak için kullanılır.
- “ boşluk-y-{sayı} ” sınıfı, liste öğeleri arasındaki dikey boşluğu sağlar.
- “ yuvarlak-md ” sınıfı, liste bloğunun köşelerini yuvarlatır.
- “ bg-{renk}-{sayı} Liste bloğunun arka plan rengini sağlamak için ” sınıfı kullanılır.
- “ s-2 ” sınıfı, liste öğesine kenarlık sağlar.
- “ kullanılarak üç liste öğesi oluşturulur.
” etiketleri. Çıktı:
Çıktıda, liste öğelerinin işaretçisi olarak bir el işaretçisi görüntüsünün ayarlandığı görülebilir:
Tailwind'de Liste Stili Görüntü Sınıfıyla Durum Değişkenlerini Kullanma
Tailwind, etkileşimli tasarımlar oluşturmaya yardımcı olan fareyle üzerine gelme, odaklanma ve aktif gibi çeşitli durum değişkenleri sağlar. Bu durumlarla liste stilinde bir görüntü sınıfı kullanmak için aşağıdaki sözdizimi kullanılır:
< ul sınıf = '{state}:list-image-{none VEYA resim url'si}' > < / ul >Liste stili resim özelliğini “ ile kullanmak için yukarıda tanımlanan sözdizimini kullanalım. vurgulu ” Tailwind'deki durum. Bu gösterimde listeye, liste işaretçisi olarak bir resim sağlanacaktır. Ancak “kullanarak vurgulu ”diyerek resim kaldırılacaktır.
< div sınıf = 'esnek yaslama merkezi' >
< ul sınıf = ' list-inside list-image-[url(handpointer.png)] fareyle üzerine gelin:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
ÖRNEK LİSTE
< O >Bu İlk Ürün< / O >
< O >Bu İkinci Öğedir< / O >
< O >Bu Üçüncü Öğedir< / O >
< / ul >
< / div >Yukarıdaki kodda “ fareyle üzerine gelin: liste-resim-yok ” sınıfı, önceden ayarlanan görüntüyü liste işaretçisi olarak kaldırır.
Çıktı:
Aşağıdaki çıktıda liste stilindeki görüntü “ hiçbiri Kullanıcı fare imlecini bunun üzerine getirdiğinde. Bu nedenle liste işaretçisi olarak kullanılan görsel kaldırıldı.
Tailwind'de Liste Stili Görüntü Sınıfıyla Kesme Noktalarını Kullanma
Kesme noktaları, Tailwind'deki öğeler için önceden ayarlanmış medya sorgularıdır. Tasarımı çeşitli ekran boyutlarına duyarlı hale getirmek için kullanılırlar. Bu kesme noktaları sm, md, lg, xl ve 2xl'yi içerir. Liste tarzı bir görüntü sınıfını kesme noktasıyla kullanmak için aşağıdaki sözdizimi kullanılır:
< ul sınıf = '{breakpoint}:list-image-{yok VEYA resim url'si}' > < / ul >Liste işaretçisini '' yerine değiştirmek için yukarıda tanımlanan sözdizimini kullanalım. görüntü ' ile ' hiçbiri ” bir kesme noktası kullanarak. Bu örnekte, ekran boyutu “” genişliğini arttırdığında görüntü işaretçisi kaldırılacaktır. MD ” kesme noktası:
< div sınıf = 'esnek yaslama merkezi' >
< ul sınıf = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2 rounded-md bg-green-400 p-2' >
ÖRNEK LİSTE
< O >Bu İlk Ürün< / O >
< O >Bu İkinci Öğedir< / O >
< O >Bu Üçüncü Öğedir< / O >
< / ul >
< / div >Yukarıdaki kodda “ md:liste-görüntü-yok ” sınıfı, ekran boyutu “” değerine ulaştığında resim listesi işaretleyicisini kaldırır. MD ” kesme noktası.
Çıktı:
Aşağıdaki çıktıda, ekran boyutu md kesme noktasına ulaştığında görüntü işaretçisi kaldırılır:
Bunların hepsi Tailwind'de liste stili görüntüsünü ayarlamakla ilgilidir.
Çözüm
Tailwind, bir öğenin liste işaretleyicisini bir görüntüye ayarlamak veya kaldırmak için önceden tanımlanmış iki liste stili görüntü sınıfına sahiptir. “ list-image-[url({Resim URL'si})] ” sınıfı, belirtilen görüntüyü liste işaretçisi olarak sağlar. “ liste-resim-yok ” sınıfı, önceden sağlanan herhangi bir resmi liste işaretçisi olarak kaldırır. Bu makalede, Tailwind'de liste stili türünü ayarlama yordamı sağlanmıştır.