Bileşenler

FilterBar

Liste ya da tablo için süzme denetimleri: uygulanan filtre çipleri, sonuç sayısı ve tek tıkla temizleme.

Storybook: Storybook
Kaynak kod: Kaynak kod

Ne zaman kullanılır

FilterBar, bir liste ya da tablonun üstünde, kullanıcının kayıtları daraltmasını sağlar: ada göre arama, duruma göre seçim, birkaç kategori, “yalnızca benim” gibi bir anahtar. Kullanıcı neyin süzüldüğünü çiplerden görür ve tek tıkla sıfırlar.

Ne zaman kullanılmaz

Tek bir alan için: Tek bir arama kutusu için TextInput ya da InputGroup yeterlidir.
Çok sayıda ve karmaşık koşul için: Mantıksal birleştirme gerektiren bir sorgu oluşturucu FilterBar’ın işi değildir.
Verinin kendisini sıralamak için: Sıralama tablo başlığındadır.
Sayfa içi gezinti için: Aynı verinin görünümleri arasında geçmek için Tabs kullanın.

Anatomi

Kök: role="search" ile adlandırılmış bölge.
Arama (FilterBar.Search): simgeli metin kutusu; etiketi görsel olarak gizli, yer tutucu aynı metni taşır.
Alanlar (FilterBar.Field): select için Select, multi-select için açılır onay kutusu grubu, toggle için Toggle.
Diğer (FilterBar.More): dar ekranda diğer alanları açan düğme ve panel.
Uygula (FilterBar.Apply): batch kipinde Uygula ve Sıfırla.
Temizle (FilterBar.Clear): yalnızca bir filtre uygulandığında.
Çipler (FilterBar.Applied): "{alan}: {değer}" çipleri.
Sonuç sayısı (FilterBar.ResultCount): “12 sonuç”.

Davranış

instant kipinde her değişiklik onValueChange ile hemen bildirilir; arama kutusunda her tuş vuruşu da. Yazarken sunucuya istek atacaksanız çağırmayı kendiniz geciktirin.
batch kipinde taslak yerel kalır; Uygula, Sıfırla ve Enter taslağı işler. Çip kaldırmak ve temizlemek hemen uygulanır.
Çoklu seçimde her seçilen seçenek ayrı bir çip olur.
“Filtreleri temizle” defaultValue değerine döner; verilmezse tüm alanlar boşalır. Temizledikten sonra odak ilk denetime gider.
Son çip kaldırılınca da odak ilk denetime gider.
Sonuç sayısı loading iken yer tutucuya döner ve duyurulmaz.
1024 px’in altında arama satırda kalır, diğer alanlar “Diğer filtreler” altına girer.

Yönergeler

Yaygın filtreleri görünür tutun

En sık kullanılan üç dört filtre satırda olsun; nadir olanları “Diğer filtreler” altında bırakın.

YapınArama ve iki sık filtre görünür; sonuç sayısı belli.

YapmayınSonuç sayısı yok; kullanıcı filtrenin işe yarayıp yaramadığını bilemiyor.

Toplu uygulamayı pahalı sorgular için seçin

Her değişiklik uzun bir sorgu başlatıyorsa batch kullanın; hafif süzmede instant daha akıcıdır.

YapınBirkaç alan seçilip bir kez uygulanıyor.

YapmayınTek bir arama kutusu için Uygula düğmesi gereksiz bir adım.

İçerik

Alan etiketini kısa bir isim yapın: “Durum”, “Kategori”, “Sahibi”.
search alanında etiket “Ara” gibi kısa olsun; yer tutucu neyin arandığını söylesin: “Ada göre ara”.
Seçeneklerde cümle düzeni kullanın ve “Tümü” seçeneğine dokunmayın; kütüphane ekler.
URL’ye yazarken arama metninin ne içerebileceğini düşünün: kişisel bilgi içeren aramaları URL’de tutmayın. Bu karar uygulamanındır.

İlgili bileşenler

Tag: Uygulanan filtre çipleri bu bileşenle çizilir.
Select: Tek seçimli alanlar için.
Toggle: Açık-kapalı filtreler için.
Table: Süzülen kayıtları göstermek için.