Tworzenie komponentu wielokrotnego wyboru

Podstawowe informacje o tworzeniu elastycznych, adaptacyjnych i dostępnych komponentów z możliwością wielokrotnego wyboru, które służą do sortowania i filtrowania wrażeń użytkowników.

Adam Argyle

W tym poście przedstawię sposoby tworzenia komponentu wielokrotnego wyboru. Wypróbuj demo.

Demonstracja

.

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

Użytkownicy często widzą produkty, a czasem wiele. być może warto ograniczyć tę listę, by zapobiec przeciążenie wyboru. Ten omawia interfejs filtrowania w celu ograniczenia możliwości wyboru. Robi to przez prezentowanie atrybutów produktów, które użytkownicy mogą zaznaczyć lub odznaczyć, co zmniejsza liczbę wyników; a tym samym zmniejszając przeciążenie możliwości wyboru.

Interakcje

Celem jest umożliwienie szybkiego przeglądania opcji filtrów wszystkim użytkownikom różne typy danych wejściowych. Dostarczane będzie w elastycznym i elastycznym formacie z par komponentów. Tradycyjny pasek boczny z polami wyboru na komputerze i klawiaturze i czytniki ekranu, a także <select multiple> na urządzeniach dotykowych.

Decyzja o skorzystaniu z wbudowanego wyboru wielokrotnego w przypadku dotyku, a nie w wersji na komputery, pozwala zaoszczędzić pracę i ułatwia pracę. Uważam jednak, że zapewnia odpowiednią obsługę przy mniejszej liczbie kodów niż stworzenie całej responsywności za pomocą jednego komponentu.

Dotyk

Komponent dotykowy oszczędza miejsce i pomaga zwiększyć dokładność interakcji na urządzeniach mobilnych. Oszczędza miejsce, zwijając cały pasek boczny pól wyboru w <select> – wbudowana nakładki dotykowe. Poprawia dokładność wprowadzania danych, pokazując dzięki dużej nakładce dotykowej dostępnej w systemie.

Klawiatura i pad do gier

Poniżej znajdziesz przykład korzystania z elementu <select multiple> z klawiatury.

Tej wbudowanej funkcji wyboru wielokrotnego nie można zmienić. Jest ona dostępna tylko w kompaktowym nie jest odpowiedni do zaprezentowania dużej liczby opcji. Zobaczcie, jak można i tak szeroki wybór opcji. Można zmienić jej rozmiar, ale nie tak dobrze jak pasek boczny z polami wyboru.

Markup

Oba komponenty będą się znajdowały w tym samym elemencie <form>. Wyniki zarówno tego typu, jak i wielokrotnego wyboru, ale mogą też być przesyłane na serwer.

<form>

</form>

Komponent Pola wyboru

Grupy pól wyboru powinny być zawarte w <fieldset> i dla argumentu <legend> Przy takiej strukturze kodu HTML pomagają czytniki ekranu FormData będzie automatycznie zrozumieć zależności między elementami.

<form>
  <fieldset>
    <legend>New</legend>
    … checkboxes …
  </fieldset>
</form>

Gdy grupowanie jest już skonfigurowane, dodaj <label> i <input type="checkbox"> dla każdego z filtrów. Używam kodu <div>, więc właściwość CSS gap pozwala równomiernie rozmieścić je i zachować wyrównanie, gdy etykiety są wielowierszowe.

<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>

Komponent <select multiple>

Rzadko używaną cechą elementu <select> jest multiple Jeśli atrybut jest używany z elementem <select>, użytkownik może wybierz wiele z listy. Przypomina to zmianę interakcji z poziomu listy opcji do listy pól wyboru.

<form>
  <select multiple="true" title="Filter results by category">
    …
  </select>
</form>

Aby utworzyć etykiety i utworzyć grupy wewnątrz elementu <select>, użyj <optgroup>. i nadaj mu atrybut oraz wartość label. Ten element i atrybut są podobne do elementów <fieldset> i <legend>.

<form>
  <select multiple="true" title="Filter results by category">
    <optgroup label="New">
      …
    </optgroup>
  </select>
</form>

Teraz dodaj <option> dla filtra.

<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>

Śledzenie danych wejściowych za pomocą liczników na potrzeby technologii wspomagającej osoby z niepełnosprawnością

Stan rola jest wykorzystywana do śledzenia i utrzymywania statystyk filtry czytników ekranu i innych technologii wspomagających osoby z niepełnosprawnością. Film w YouTube przedstawia tę funkcję. Integracja zaczyna się od kodu HTML i atrybutu role="status"

<div role="status" class="sr-only" id="applied-filters"></div>

Ten element będzie odczytywać na głos zmiany wprowadzone w treści. Możemy zaktualizować treść za pomocą CSS liczniki zdarzeń gdy użytkownicy wchodzą w interakcje z polami wyboru. W tym celu musimy najpierw utworzyć licznika z nazwą w elemencie nadrzędnym elementów wejściowych i State.

aside {
  counter-reset: filters;
}

Domyślnie liczba będzie wynosić 0, czyli świetnie, nic nie będzie :checked. domyślnie w tym projekcie.

Następnie, aby zwiększyć nowo utworzony licznik, skierujemy reklamy na elementy podrzędne <aside> element o wartości :checked. Gdy użytkownik zmienia stan danych wejściowych, licznik filters będzie sumować się.

aside :checked {
  counter-increment: filters;
}

Usługa porównywania cen zna teraz ogólne podsumowanie interfejsu użytkownika z polem wyboru oraz rolę stanu element jest pusty i oczekuje na wartości. Ponieważ usługa porównywania cen utrzymuje wyniki w pamięci, counter() funkcja umożliwia dostęp do wartości z pseudo treść elementu:

aside #applied-filters::before {
  content: counter(filters) " filters ";
}

Kod HTML elementu roli stanu zmieni się na „2 filtry” na ekran . To dobry początek, ale możemy zrobić jeszcze więcej, na przykład udostępnić wyniki wyniki, które zostały zaktualizowane przez filtry. Użyjemy JavaScriptu, bo jest to niż liczniki zdarzeń.

Ekscytacja w fazie Nest

Algorytm liczników sprawdza się świetnie w przypadku CSS nesting-1. Udało mi się umieścić wszystkie w jeden blok. Łatwe w użyciu i scentralizowane czytanie i aktualizacje.

aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters;
  }

  & #applied-filters::before {
    content: counter(filters) " filters ";
  }
}

Uwaga: przesyłam składnię zagnieżdżenia za pomocą tej wtyczki PostCSS Nesting, aby działała już w przeglądarkach.

Układy

W tej sekcji opisano układy między tymi 2 komponentami. Większość style układu dotyczą tylko komponentu pola wyboru na komputerze.

Formularz

Aby zoptymalizować czytelność i czytelność dla użytkowników, formularzowi przyznano maksymalną liczbę 30 znaków, co pozwala ustawić szerokość linii optycznych dla każdej etykietę filtra. Formularz używa układu siatki i właściwości gap, by rozdzielić zbiorami pól.

form {
  display: grid;
  gap: 2ch;
  max-inline-size: 30ch;
}

Element <select>

Lista etykiet i pola wyboru zajmują zbyt dużo miejsca na urządzeniach mobilnych. Dlatego układ sprawdza, czy główne urządzenie wskazuje użytkownika, które ma zostać zmienione. i dotyku.

@media (pointer: coarse) {
  select[multiple] {
    display: block;
  }
}

Wartość coarse oznacza, że użytkownik nie będzie mógł wchodzić w interakcję z: z dużą precyzją przy użyciu swojego głównego urządzenia wejściowego. Dzień urządzenia mobilnego, wartość wskaźnika często wynosi coarse (jako interakcja główna). jest dotyk. Na komputerach wartość wskaźnika często wynosi fine, ponieważ jest to najczęstsza wartość podłączenia myszy lub innego urządzenia wejściowego o wysokiej precyzji.

Zbiory pól

Domyślny styl i układ elementu <fieldset> z atrybutem <legend> jest unikalny:

Normalnie, aby rozmieścić elementy podrzędne, użyłbym właściwości gap, ale unikalny pozycjonowanie elementu <legend> utrudnia utworzenie zestawu równomiernie rozmieszczonych dzieci. Zamiast gap, sąsiadujące rodzeństwo selektor i W użyciu jest margin-block-start.

fieldset {
  padding: 2ch;

  & > div + div {
    margin-block-start: 2ch;
  }
}

Dzięki temu w przypadku elementu „<legend>” obszar ekranu nie będzie dostosowywany przez kierowanie tylko na <div> dzieci.

Etykieta i pole wyboru filtra

Jako bezpośredni element podrzędny elementu <fieldset> i w zakresie maksymalnej szerokości formularza 30ch, tekst etykiety może się zawijać, jeśli jest zbyt długi. Zawijanie tekstu jest świetne, niedopasowanie tekstu do pola wyboru. Idealnie do tego sprawdzi się Flexbox.

fieldset > div {
  display: flex;
  gap: 2ch;
  align-items: baseline;
}

.

Zagraj w więcej w Codepen

.

Animowana siatka

Animacja układu jest wykonywana przez system Isotope. O wydajną i zaawansowaną wtyczkę do interaktywnego sortowania i filtrowania.

JavaScript

Oprócz pomocy w zarządzaniu przejrzystą, animowaną, interaktywną siatką, JavaScript do polerowania kilku nierównych krawędzi.

Normalizowanie danych wejściowych użytkownika

Ten projekt obejmuje jeden formularz z 2 różnymi sposobami wprowadzania danych. nie serializować tak samo. Przy użyciu JavaScriptu możemy znormalizować dane.

Wybieram dopasowanie struktury danych elementu <select> do zgrupowanych pól wyboru do jego struktury. W tym celu musisz wstawić input do elementu <select> zostanie dodany detektor zdarzeń, selectedOptions są mapowane.

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
  }, [])
})

Teraz możesz bezpiecznie przesłać formularz. W przypadku tej wersji demonstracyjnej możesz przesłać instrukcje dotyczące izotopu według kryteriów filtrowania.

Kończenie elementu roli stanu

Element tylko zlicza i podaje liczbę filtrów na podstawie pola wyboru. ale uznałem, że dobrym pomysłem będzie też dodatkowe podanie i uwzględnij wszystkie wybrane elementy (<select>).

Wybór elementu <select> widoczny w tabeli counter()

W sekcji normalizacji danych utworzono już detektor na potrzeby wprowadzania danych. Na na końcu tej funkcji liczba wybranych filtrów i liczba wyników dla tych filtrów. Wartości można przekazywać do elementu roli stanu w ten sposób.

let statusRoleElement = document.querySelector('#applied-filters')
statusRoleElement.style.counterSet = selectData.length

Wyniki widoczne w elemencie role="status"

Funkcja :checked udostępnia wbudowany sposób przekazywania liczby wybranych filtrów do funkcji element roli stanu, ale nie ma widoczności przefiltrowanej liczby wyników. JavaScript może monitorować interakcje z polami wyboru oraz po przefiltrowaniu siatkę, dodaj textContent tak jak w elemencie <select>.

document
  .querySelector('aside form')
  .addEventListener('input', e => {
    // isotope demo code
    let filterResults = IsotopeGrid.getFilteredItemElements().length
    document.querySelector('#applied-filters').textContent = `giving ${filterResults} results`
})

Podsumowując, te czynności stanowią zakończenie komunikatu „2 filtry dające 25 wyników”.

Teraz nasze doskonałe technologie wspomagające osoby z niepełnosprawnością będą dostarczane jak reagują na reklamy.

Podsumowanie

Wiesz już, jak to zrobiłem. Jak Ty? 🙂

Stosujmy różne podejścia i poznajmy sposoby budowania obecności w internecie. Utwórz wersję demonstracyjną, a potem dodaj linki do funkcji tweetuj mi. znajdziesz poniżej w sekcji z remiksami na karcie Społeczność.

Remiksy utworzone przez społeczność

Na razie nic tu nie ma.