Rozet ve Etiket Bileşenleri

Rozetler, durumu, sayıları veya kategorileri bir bakışta ileten küçük ve kompakt görsel etiketlerdir. Etiketler genellikle kullanıcıların süzme ve sınıflandırma amacıyla uyguladığı etiketlerdir; durum rozetleri ise Etkin, Beklemede veya Arşivlendi gibi durumları gösterir.

Tailwind'de her ikisi de aynı temel yapıyla oluşturulur: az miktarda dolgu, rounded-full veya rounded-md kenar yarıçapı, bir arka plan rengi ve küçük metin. Bileşenin tamamı için özel CSS gerekmez.

Hap rozetleri, tamamen yuvarlatılmış uçlar için rounded-full kullanır. Bu da onları dikdörtgen içeriklerden ayıran belirgin bir şekil oluşturur. Standart yaklaşım, aynı renk ailesinden açık bir arka plan tonu ile daha koyu bir metin tonunu eşleştirmektir.

Örneğin bg-green-100 text-green-800, küçük boyutlarda kolay okunabilen yumuşak yeşil bir rozet oluşturur. Kompakt dolgu için px-2.5 py-0.5, okunabilir bir etiket için text-xs font-medium kullanın.

Daha yüksek karşıtlık gereken durumlarda düz rozetler, bg-blue-600 gibi tamamen doygun bir arka planı text-white ile kullanır. Bunlar koyu arka planlarda veya rozetin diğer öğelerle görsel açıdan yarışması gerektiğinde iyi sonuç verir.

Düz rozetler bildirim sayılarına, sürüm etiketlerine (Yeni veya Beta gibi) ve özellik işaretleyicilerindeki ya da değişiklik günlüklerindeki kategori göstergelerine sıkça uygulanır.

Bir bildirim sayısı rozeti, okunmamış öğeleri göstermek için bir düğmenin veya simgenin üzerine taşar. Kapsayıcıda relative, rozette ise absolute -top-1 -right-1 kullanarak rozeti üst öğesine göre mutlak konumlandırın.

Küçük boyutlarda kusursuz dairesel bir rozet için w-5 h-5 flex items-center justify-center kullanın. Sayı sıfır olduğunda koşullu görüntüleme veya hidden yardımcı sınıfını kullanarak rozeti gizleyin.

Bir nokta rozeti, metin kullanmadan, yalnızca küçük ve renkli bir daireyle durumu aktarır. Nokta oluşturmak için w-2.5 h-2.5 rounded-full sınıflarını bir arka plan rengiyle birleştirin; metnin yanında konumlandırmak için inline-flex items-center gap-1.5 kullanın.

Nokta göstergeleri çevrimiçi/çevrimdışı durumunu, gerçek zamanlı eşitleme durumunu veya bir kaydın hangi ortama (üretim ya da hazırlama) ait olduğunu göstermek için idealdir.

Bir çerçeveli rozet, arka plan dolgusu yerine kenarlık kullanır: şeffaf veya çok açık bir arka planla birlikte border border-blue-500 text-blue-600. Bu, yakındaki dolgulu öğelerle rekabet etmeyen zarif bir etiket oluşturur.

bg-transparent ekleyin (veya herhangi bir bg- sınıfını kullanmayın) ve kenarlık kalınlığı üzerinde daha fazla denetim sağlayan alternatif bir yaklaşım için ring-1 ring-inset ring-blue-500 kullanın.

Süzme etiketlerinin kullanıcıların onları kapatabilmesi için genellikle bir kaldırma (×) düğmesine ihtiyacı vardır. Etiketi, etiketi ve küçük bir simge düğmesini içeren inline-flex items-center gap-1 sınıflı bir kapsayıcı olarak oluşturun.

Kaldırma düğmesinde ml-1 text-gray-500 hover:text-gray-900 ve küçük bir × kullanın. Böylece düğme görsel açıdan baskın olmadan kolayca tıklanabilir. Bu düzen arama süzgeçlerinde, beceri etiketlerinde ve çoklu seçim girişlerinde yaygındır.

Rozet etiketinden önce küçük bir simge eklemek, kullanıcının metni okumasını gerektirmeden görsel bağlam sağlar. Rozet metnine uygun orantıyı korumak için inline-flex items-center gap-1 ve w-3 h-3 boyutlarında bir SVG kullanın.

Yeşil rozette onay işareti, sarı rozette saat ve kırmızı rozette X kullanmak, durumu hem renk hem de şekil aracılığıyla anlamlı biçimde iletir.

Tüm rozetlerin tamamen yuvarlatılmış köşelere sahip olması gerekmez. rounded-full yerine rounded-md kullanan kare etiket daha düzenli görünür ve teknoloji etiketleri, sürüm numaraları ve kategori parçaları için iyi çalışır.

Bu stil; dikdörtgen şeklin kod bloklarının ve teknik etiketlerin stilini yansıttığı geliştirici araçlarında, belge sitelerinde ve değişiklik günlüklerinde sıkça görülür.

Rozetler, bağlama göre farklı boyutlarda kullanılabilir. Veri tablosu satırında ekstra küçük bir rozet (text-xs) arayüzü kompakt tutar. Pazarlama sayfasında daha büyük bir hap (text-sm px-4 py-1) bir bakışta daha kolay okunur.

Boyut çeşitlerini px-*, py-* ve text-* değerlerini ayarlayarak tanımlayın. Mutlak piksel boyutları kullanmaktan kaçının; tasarımınızın tutarlı kalması için Tailwind ölçeğine bağlı kalın.

Gerçek zamanlı veya canlı içeriği belirtmek için yaygın bir yaklaşım nabız atan nokta kullanmaktır. Gözü üzerine çeken dalgalanma efekti oluşturmak için rozet kapsayıcısının içindeki mutlak konumlandırılmış bir span üzerinde animate-ping kullanın.

Hareketli noktanın üzerine sabit bir nokta yerleştirin: animate-ping span'i dalgalanmayı oluştururken, katı renkli kardeş w-2 h-2 rounded-full bg-red-600 çekirdek noktayı sağlar. Her ikisini de relative bir kapsayıcıya sarın.

Bu derste şunları öğrendiniz: rounded-full ve rounded-md kullanılarak oluşturulan hap ve kare rozet şekilleri; aynı renk tonundan açık arka planların (100 tonu) koyu metinle (800 tonu) eşleştirildiği durum renk kodlaması; ve mutlak konumlandırmalı bildirim sayıları, nokta göstergeleri, etiketlerde kaldırma düğmeleri ve animate-ping kullanan canlı nabız animasyonu gibi özel rozet düzenleri. Sırada bileşenleri tam bir kullanıcı arayüzünde birleştireceğiz.