LivaFilterChips

Bir listeyi türe ya da duruma göre süzmek için renkli noktalı, isteğe bağlı sayaçlı aç/kapa çipleri. Her çip sade bir <button>'dır (DevExtreme bileşeni değildir), bu yüzden DevExtreme seçenekleri aktarılmaz. Seçim denetimlidir: seçili anahtarları value ile verirsiniz, her tıklamada yeni değer onChange ile gelir. Seçili bir çipe yeniden tıklamak onu seçimden çıkarır.

import { LivaFilterChips, type LivaFilterChipItem } from "@dataliva/livalib";

Çoklu seçim

Varsayılan selectionMode 'multiple''dır: value bir anahtar dizisidir, onChange güncel diziyi verir (yeni seçilen anahtar dizinin sonuna eklenir). Boş dizinin ne anlama geldiğine bileşen karar vermez; süzmeyi siz yaparsınız. Örnekte boş seçim "tümü" anlamına gelir.

Bileşen kendi "temizle" düğmesini çizmez. Arama kutusu gibi başka filtrelerle birlikte sıfırlanması gerekiyorsa temizleme düğmesini bileşenin dışına koyun.

Tek seçim

selectionMode="single" ile value tek bir anahtar ya da null'dır. Başka bir çipe tıklamak seçimi değiştirir; seçili çipe yeniden tıklamak null yayar. value ve onChange tipleri selectionMode'a göre ayrışır, yani TypeScript tek seçimde dizi, çoklu seçimde tekil değer vermenize izin vermez.

disableEmpty sayacı 0 olan çipleri pasifleştirir; seçilselerdi liste tamamen boşalırdı. Seçili bir çip sayacı 0'a düşse bile tıklanabilir kalır ki kullanıcı onu kaldırabilsin. count verilmemiş çipler bu kuraldan etkilenmez.

Sayaç, ipucu ve devre dışı çip

count verilen çipte etiketin sağında soluk, sabit genişlikli rakamlarla bir sayaç çizilir; count yoksa sayaç alanı hiç çizilmez. Sayaç varsayılan olarak tarayıcının yereline göre binlik ayraçla (count.toLocaleString()) biçimlenir; formatCount ile değiştirilir. hint çipin üzerine gelince görünen ipucudur (title), disabled ise çipi seçimden bağımsız olarak pasifleştirir.

Anahtarlar string ya da number olabilir; bileşen anahtar tipine göre geneldir (LivaFilterChipItem<number>[] + number[] değer gibi).

Boyut ve nokta

size çipin iç boşluğunu, yazı boyunu ve noktanın çapını birlikte değiştirir ('small' | 'medium' | 'large', varsayılan 'medium'). showDot={false} renkli noktayı gizler; renk yine üzerine gelince çerçevede ve seçili çipin zemininde görünür. Çipler sığmadığında alt satıra kayar.

Renk

Her öğenin color alanı bir tema rengi adı ya da herhangi bir CSS rengi ("#10b981", "var(--marka-rengi)") alır. Verilmezse temanın birincil rengi kullanılır. Tema adları şu değişkenlere çevrilir:

Renk; noktayı, üzerine gelince çerçeveyi, klavye odak halkasını ve seçili çipin çerçevesi ile zemin tonunu belirler. Zemin tonu rengin temanın yüzey rengiyle karıştırılmasıyla elde edildiği için koyu temada da metin okunur kalır.

Erişilebilirlik

• Kök öğe role="group" taşır; ariaLabel grubun adıdır ("Olay türü", "Durum"…). Verilmesi önerilir.
• Her çip aria-pressed ile seçili olup olmadığını bildirir; klavyeyle Tab ile gezilir, Enter/Boşluk ile seçilir. Renkli nokta ekran okuyuculardan gizlidir.
• Yüksek karşıtlık modunda (forced-colors) seçili çip kalın bir çerçeveyle gösterilir; prefers-reduced-motion açıkken renk geçiş animasyonu kapanır.

K = LivaFilterChipKey (string | number), varsayılan string.

LivaFilterChipItem

LivaFilterChipColor: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' ya da herhangi bir CSS rengi.

Dışa aktarılan tipler: LivaFilterChipKey, LivaFilterChipColor, LivaFilterChipItem, LivaFilterChipsProps (iki seçim kipinin birleşimi), LivaFilterChipsMultipleProps, LivaFilterChipsSingleProps.