Çoklu seçim bileşeni oluşturma

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ış.

Adam Argyle

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.