SearchOptionToggle

Opcje włączane i wyłączane wewnątrz pola wyszukiwania: uwzględnianie wielkości liter, całe słowo, wyrażenie regularne. Przekaż je do GlobalSearch przez actions.

SearchOptionToggle

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: SearchOptionToggle

Match case off, whole word off, regular expression on.

Noc, podgląd: SearchOptionToggle

Match case off, whole word off, regular expression on.

Wysoki kontrast, podgląd: SearchOptionToggle

Match case off, whole word off, regular expression on.

UżycieLink do sekcji Użycie

tsx

import { SearchOptionToggle } from '@skribly/ui/search'

tsx

<SearchOptionToggle label="Match case" shortcut="Alt C" isSelected={matchCase} onChange={setMatchCase}>
  <CaseSensitive aria-hidden="true" />
</SearchOptionToggle>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Każda jest przyciskiem przełączanym o rozmiarze celu 24 px, nazwanym przez label, z aria-pressed i aria-keyshortcuts.
Jej nazwa pojawia się też jako dymek podpowiedzi po najechaniu i przy fokusie z klawiatury, a Escape ukrywa dymek.
Aktywna opcja dostaje ramkę i wypełnienie w kolorze akcentu, a Highlight koloruje się w trybie wymuszonych kolorów.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.