Kullanıcı deneyimlerini sıralamak ve filtrelemek için duyarlı, uyarlanabilir ve erişilebilir çoklu seçim bileşeni oluşturmaya dair temel bir genel bakış.
Bu gönderide, çoklu seçim bileşeni oluşturmanın yolu üzerine düşüncelerimi paylaşmak istiyorum. Şunu deneyin: demo.
Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:
Genel Bakış
Kullanıcılara çoğu zaman öğeler, bazen de çok sayıda öğe sunulur ve bu durumlardan sakınmak üzere listeyi kısaltmak için bir yol sunmak çok fazla seçenek. Bu blog yayınında, seçenekleri azaltmanın bir yolu olarak filtreleme kullanıcı arayüzü ele alınıyor. Bu işlemi Kullanıcıların seçebileceği veya seçimini kaldırabileceği öğe özellikleri sunarak sonuçları azaltan Böylece seçenek yükünü azaltırsınız.
Etkileşimler
Amaç, tüm kullanıcılar ve kullanıcıları için filtre seçeneklerinin hızlı bir şekilde geçişini sağlamaktır.
çeşitli giriş türleri. Bu, uyarlanabilir ve duyarlı bir
oluşturabilirsiniz. Masaüstü, klavye için onay kutularından oluşan geleneksel bir kenar çubuğu
ekran okuyucular ve <select
multiple>
en iyi uygulamaları paylaşacağız.
Yerleşik çoklu seçim özelliğini masaüstü için değil, dokunmak için kullanma kararı, işi azaltır ve iş yapılmasını sağlar. Ancak, duyarlı deneyimin tamamını tek bir bileşende oluşturmaya kıyasla daha az kod borçlarıyla uygun deneyimler sunduğuna inanıyorum.
Dokunma
Dokunma bileşeni yerden tasarruf sağlar ve çeşitli cihazlarda kullanıcı etkileşimi
mobil. Onay kutularından oluşan bir kenar çubuğunun tamamını
<select>
yerleşik yer paylaşımlı dokunma deneyimi. Giriş doğruluğuna yardımcı olur.
geniş bir dokunmatik yer paylaşımı deneyimi sunmak.
Klavye ve oyun kumandası
Aşağıda, klavyeden <select multiple>
işlevinin nasıl kullanılacağı gösterilmektedir.
Bu yerleşik çoklu seçimin stili ayarlanamaz ve yalnızca kompakt bir boyut olarak sunulur. çok fazla seçenek sunmaya uygun değildir. Göreceli çaba tahmininin kutudaki seçenekler genişlemiş gibi görünüyor mu? Boyutunu değiştirebilirsiniz ancak hâlâ onay kutuları kenar çubuğu olarak kullanılamaz.
Brüt kar
Her iki bileşen de aynı <form>
öğesinde yer alır. Sonuçları
bu form, onay kutuları veya çoklu seçim yöntemiyle karşılaştırılır ve
ancak bir sunucuya da gönderilebilir.
<form>
</form>
Onay kutuları bileşeni
Onay kutusu grupları,
<fieldset>
öğesine bir
<legend>
.
HTML bu şekilde yapılandırıldığında ekran okuyucular ve
FormData,
öğelerin ilişkisini otomatik olarak anlar.
<form>
<fieldset>
<legend>New</legend>
… checkboxes …
</fieldset>
</form>
Gruplandırma yaptıktan sonra bir <label>
ve <input type="checkbox">
ekleyin,
her biri için geçerli olur. Benimkini <div>
içinde sarmalamayı seçtim, dolayısıyla CSS gap
özelliği
etiketler zamanla eşit olarak ayrılabilir ve etiketler çok satırlı olduğunda hizalamanın korunması sağlanabilir.
<form>
<fieldset>
<legend>New</legend>
<div>
<input type="checkbox" id="last 30 days" name="new" value="last 30 days">
<label for="last 30 days">Last 30 Days</label>
</div>
<div>
<input type="checkbox" id="last 6 months" name="new" value="last 6 months">
<label for="last 6 months">Last 6 Months</label>
</div>
</fieldset>
</form>
<select multiple>
bileşeni
<select>
öğesinin nadiren kullanılan bir özelliği:
multiple
Özellik bir <select>
öğesiyle birlikte kullanıldığında kullanıcının şunları yapmasına izin verilir:
listeden çok sayıda seçenek belirleyebilirsiniz. Bir radyo listesindeki etkileşimin
dönüştürülebilir.
<form>
<select multiple="true" title="Filter results by category">
…
</select>
</form>
<select>
içinde grup etiketlemek ve grup oluşturmak için
<optgroup>
öğesine label
özelliği ve değeri verin. Bu öğe ve özellik
değeri <fieldset>
ve <legend>
öğelerine benzer.
<form>
<select multiple="true" title="Filter results by category">
<optgroup label="New">
…
</optgroup>
</select>
</form>
Şimdi
<option>
öğelerini seçin.
<form>
<select multiple="true" title="Filter results by category">
<optgroup label="New">
<option value="last 30 days">Last 30 Days</option>
<option value="last 6 months">Last 6 Months</option>
</optgroup>
</select>
</form>
Yardımcı teknolojileri bilgilendirmek için girişleri sayaçlarla izleme
Durum
rol
bu kullanıcı deneyiminde, kullanıcı deneyiminin
Ekran okuyucular ve diğer yardımcı teknolojiler için filtreler. YouTube videosu
o özelliği gösterir. Entegrasyon, HTML ve
role="status"
<div role="status" class="sr-only" id="applied-filters"></div>
Bu öğe, içerikte yapılan değişiklikleri sesli okur. Kampanyalarınızın CSS'li içerikler sayaçlar kullanıcılar onay kutularıyla etkileşim kurdukça. Bunun için öncelikle sayaçın alt öğesi üzerinde bir ad bulunur.
aside {
counter-reset: filters;
}
Varsayılan olarak sayı 0
olur ve bu çok iyidir. Şu ana kadar hiçbir şey :checked
değil
varsayılan olarak tasarladık.
Daha sonra, yeni oluşturulan sayacımızı artırmak için anahtar kelimenin alt öğelerini
:checked
olan <aside>
öğeleri. Kullanıcı girişlerin durumunu değiştirdikçe
filters
sayacı artar.
aside :checked {
counter-increment: filters;
}
CSS artık onay kutusu kullanıcı arayüzünün genel hesabını ve durum rolünün farkında
öğesi boş ve değer bekliyor. CSS'ler de diğer tıklamalardaki
hafıza,
counter()
işlevi, değere söz konusu öğeden erişilmesine izin verir
öğesi içerikleri için aşağıdaki adımları izleyin:
aside #applied-filters::before {
content: counter(filters) " filters ";
}
Durum rolü öğesinin HTML'sinde artık "2 filtre " duyurulacaktır bir ekrana yansıt yardımcı olur. Bu iyi bir başlangıç. Ancak daha iyisini yapabiliriz. Örneğin sonraki süreçte elde ettiğiniz filtre güncellendi. Bu işlemi JavaScript'ten yapacağız çünkü çok daha fazlasını öğreneceğiz.
İç içe heyecan
Sayaç algoritması CSS'de çok işe yaradı nesting-1 ile bir kenara koyarım. mantığını da tek bir blokta tutuyor. Taşınabilir ve merkezi bir yapıdadır, okuma ve güncelleme yapar.
aside {
counter-reset: filters;
& :checked {
counter-increment: filters;
}
& #applied-filters::before {
content: counter(filters) " filters ";
}
}
Düzenler
Bu bölümde, iki bileşen arasındaki düzenler açıklanmaktadır. Çoğu düzen stilleri, masaüstü onay kutusu bileşeni içindir.
Form
Kullanıcılar için okunabilirliği ve taranabilirliği optimize etmek amacıyla forma maksimum
30 karakterlik genişliğinde olmalı, temelde her video için optik bir çizgi genişliği ayarlama
filtre etiketi. Form, boşlukları doldurmak için ızgara düzenini ve gap
özelliğini kullanır.
alan kümeleri.
form {
display: grid;
gap: 2ch;
max-inline-size: 30ch;
}
<select>
öğesi
Hem etiket listesi hem de onay kutuları mobil cihazlarda çok fazla yer kaplar. Bu nedenle, düzen, değişiklik yapmak için kullanıcının birincil işaretleme cihazının olup olmadığını kontrol eder. bir deneyimdir.
@media (pointer: coarse) {
select[multiple] {
display: block;
}
}
coarse
değeri, kullanıcının
yüksek hassasiyetle göstermelerini sağlıyor. Bir
mobil cihazda, işaretçi değeri genellikle birincil etkileşim olarak coarse
şeklindedir
dokunmaktır. Masaüstü cihazlarda işaretçi değeri yaygın olduğundan genellikle fine
şeklindedir
bir fare veya yüksek hassasiyetli başka bir giriş cihazının bağlanmasını sağlamak.
Alan kümeleri
<legend>
içeren bir <fieldset>
öğesinin varsayılan stili ve düzeni benzersizdir:
Normalde, alt öğelerimi boşluk eklemek için gap
özelliğini kullanırım, ancak benzersiz
<legend>
için konumlandırma, eşit aralıklı bir küme oluşturmayı zorlaştırıyor
oluşturuyor. gap
yerine, yakındaki kardeş öğe
seçici ve
margin-block-start
kullanılıyor.
fieldset {
padding: 2ch;
& > div + div {
margin-block-start: 2ch;
}
}
Böylece <legend>
, alanının yalnızca
<div>
çocuk.
Filtre etiketi ve onay kutusu
<fieldset>
öğesinin doğrudan alt öğesi olarak ve formun maksimum genişliğinde
30ch
, etiket metni çok uzun olursa kaydırılabilir. Metni kaydırmak çok iyi olur,
hiçbir uyuşmazlık yoktur. Flexbox bunun için idealdir.
fieldset > div {
display: flex;
gap: 2ch;
align-items: baseline;
}
Animasyonlu ızgara
Düzen animasyonu, Isotope tarafından yapılır. CEVAP etkileşimli sıralama ve filtreleme için yüksek performanslı, güçlü eklenti.
JavaScript
Düzenli, animasyonlu, etkileşimli bir ızgaranın düzenlenmesine yardımcı olmanın yanı sıra, birkaç pürüzlü kenarın parlatılması için kullanılır.
Kullanıcı girişini normalleştirme
Bu tasarım, girdi sağlamanın iki farklı yolu olan tek bir forma sahiptir ve yapma seriselleştirme: aynı. Bazı JavaScript'lerde ise normalleştirmesini sağlar.
<select>
öğesinin veri yapısını gruplandırılmış onay kutularına hizalamayı seçtim
inceleyeceğiz. Bunun için de
input
etkinlik işleyici <select>
öğesine eklenir ve bu noktada
selectedOptions
eşleştirilir.
document.querySelector('select').addEventListener('input', event => {
// make selectedOptions iterable then reduce a new array object
let selectData = Array.from(event.target.selectedOptions).reduce((data, opt) => {
// parent optgroup label and option value are added to the reduce aggregator
data.push([opt.parentElement.label.toLowerCase(), opt.value])
return data
}, [])
})
Artık formu güvenle gönderebilir veya bu demoda Isotope'a talimat verebilirsiniz en iyi uygulamaları paylaşacağız.
Durum rolü öğesi tamamlanıyor
Öğe, filtre sayısını yalnızca onay kutusuna göre hesaplıyor ve duyuruyor
ama ara hedeflerde de konu sayısını da paylaşmanın iyi bir fikir olduğunu
ve <select>
öğe seçeneklerinin de sayıldığından emin olun.
<select>
öğe seçimi counter()
Veri normalleştirme bölümünde, girişte bir işleyici zaten oluşturulmuş. Kuyruklu a işareti bu işlevin sonu, seçilen filtrelerin sayısı ve sonuç sayısı bilmeniz gerekir. Değerler, durum rol öğesine iletilebilir İşte bu şekilde.
let statusRoleElement = document.querySelector('#applied-filters')
statusRoleElement.style.counterSet = selectData.length
Sonuçlar role="status"
öğesinde yansıtılıyor
:checked
, seçilen filtre sayısının
durum rolü öğesi, ancak filtrelenmiş sonuç sayısını göremez.
JavaScript, onay kutularıyla etkileşimleri ve
ızgarasına <select>
öğesinin yaptığı gibi textContent
ekleyin.
document
.querySelector('aside form')
.addEventListener('input', e => {
// isotope demo code
let filterResults = IsotopeGrid.getFilteredItemElements().length
document.querySelector('#applied-filters').textContent = `giving ${filterResults} results`
})
Bu çalışma birlikte "2 filtre, 25 sonuç veriyor" duyurusunu tamamlamıştır.
Artık mükemmel yardımcı teknoloji deneyimimiz tüm nasıl etkileşimde bulunurlarsa kullansınlar.
Sonuç
Şimdi bunu nasıl yaptığımı öğrendiğinize göre siz nasıl ‽ 🙂
Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Bir demo oluşturup beni tweet'le bağlantıları eklerim aşağıdaki topluluk remiksleri bölümüne gidin!
Topluluk remiksleri
Henüz burada görülecek bir şey yok.