DaisyUI - Arka rüzgar bileşenleri

Tailwind yardımcı program sınıfları için Bootstrap eşdeğeri

Tailwind yardımcı program sınıfları için Bootstrap eşdeğeri

Tailwind.css'yi tam olarak destekleyen ve kullanan Bootstrap'a bir alternatif arıyorsanız, Tailwind.css için "Daisy UI" adlı yeni bir eklenti doğru seçim olabilir. Uygulamanızı çok yönlü stille hızla zenginleştirmek için önceden tanımlanmış yardımcı program sınıflarından oluşan geniş bir koleksiyon sunar.

Image 1a09d33e6b34

Geniş bir bileşen koleksiyonu

Aslında, mevcut UI öğelerinin koleksiyonu o kadar büyüktür ki, muhtemelen yalnızca tüm görsel öğeler için Daisy UI'ye güvenebilirsiniz. Eklenti, düğmeler, gezinme çubukları veya sekme kapsayıcıları gibi temel bileşenler için stiller sunar. Ancak, istatistiksel veriler için bir sayaç veya ekran gibi mevcut bileşenlerle daha özel kullanım durumları da kapsanmaktadır.

Image a4df3cfc37ba

Image 583cf6365559

Image 99904997e8bb

Image 0207bafaa6a1

Gerçek bir takım oyuncusu

Tailwind.css kullanmanın en büyük faydalarından biri bence eklenti mimarisidir. Daisy UI'nin kendisi büyük bir CSS kuralları koleksiyonu olabilir, ancak bunlar yalnızca mevcut yardımcı program sınıflarına veya düz CSS'ye dayandığından, üretim uygulamanızda yalnızca gerçekten kullanılan stilleri gönderirsiniz.

Bu "bileşenlerin" React gibi herhangi bir çerçeveye bağlı olmadığını da belirtmek önemlidir. Bunlar saf Tailwind.css yardımcı sınıflarıdır ve kitaplığı uygulayabilen her projeyle çalışırlar.

Harika animasyonlar

Önceden tanımlanmış bileşenlerin çoğunu kullanmayı düşünmeseniz bile, Daisy UI size yine de harika bir dizi temel animasyon sunar. Bir örnek, içeriğinin gizlenmesini veya açığa çıkarılmasını canlandıran “Çöktürme” bileşeni olabilir. Başka bir harika örnek, değerleri geri saymak için güzel bir animasyon sağlayan geri sayım öğesidir.

Bootstrap'a bir alternatif

Daisy UI'ye bağlı değilim, ancak önceden tanımlanmış stiller koleksiyonu size çok zaman kazandırabileceğinden paylaşmaya değer olduğunu düşündüm. Her şey Tailwind.css'ye dayanıyor ve tema için büyük destek var. Projenizin bundan faydalanıp faydalanamayacağını görmek için kesinlikle Daisy UI'ye göz atmalısınız. Bağlantı, bu sayfanın sonundaki ekte bulunabilir.