Przełącznik

Przełącznik jest dla ustawienia, które stosuje się, gdy tylko je przestawisz. Pole wyboru jest dla decyzji, którą potwierdzasz później, przyciskiem wysyłania. Jeśli Twoja kontrolka siedzi w formularzu z przyciskiem Zapisz na dole, to pole wyboru.

Komponent nazywa się toggle(), a nie switch(), z nudnego, ale nieuniknionego powodu: switch to słowo zastrzeżone, więc nie może być wiązaniem importu. Pod spodem to prawdziwy <input type="checkbox"> niosący role="switch".

Podstawowy przełącznik

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Witryna publiczna', name: 'public' }),
  toggle({ label: 'Włączony', name: 'on', checked: true }),
)

Kolory

stack({ direction: 'row', gap: 'lg', wrap: true },
  toggle({ label: 'Primary', checked: true, color: 'primary' }),
  toggle({ label: 'Neutral', checked: true, color: 'neutral' }),
  toggle({ label: 'Success', checked: true, color: 'success' }),
  toggle({ label: 'Warning', checked: true, color: 'warning' }),
  toggle({ label: 'Danger', checked: true, color: 'danger' }),
)

Wyłączony

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Wyłączony i zablokowany', disabled: true }),
  toggle({ label: 'Włączony i zablokowany', checked: true, disabled: true }),
)

Bez etykiety

Przełącznik bez widocznej etykiety nadal potrzebuje dostępnej nazwy. Podaj aria-label — przechodzi na input.

toggle({ 'aria-label': 'Włącz wyszukiwanie Pagefind', checked: true })

Lista ustawień

Typowy kształt: etykieta po lewej, przełącznik po prawej, jeden wiersz na ustawienie.

  • Wyszukiwanie Pagefind
    Indeksuje każdą stronę na końcu buildu.
  • Optymalizacja obrazów
    Skaluje i konwertuje obrazy podczas buildu. Wymaga sharpa.
  • Wyspy serwerowe
    Renderuje oznaczone obszary w chwili żądania.
return list(
  [
    ['Wyszukiwanie Pagefind', 'Indeksuje każdą stronę na końcu buildu.', true],
    ['Optymalizacja obrazów', 'Skaluje i konwertuje obrazy podczas buildu. Wymaga sharpa.', true],
    ['Wyspy serwerowe', 'Renderuje oznaczone obszary w chwili żądania.', false],
  ].map(([name, description, on]) =>
    listItem({
      title: name,
      description,
      end: toggle({ 'aria-label': name, checked: on }),
    }),
  ),
)

Propsy

PropTypDomyślnieOpis
labelChild—Tekst obok przełącznika. Gdy go nie ma, użyj aria-label.
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Kolor toru, gdy włączony.
checkedbooleanfalseCzy startuje włączony.
namestring—Nazwa pola formularza.
disabledbooleanfalseWyłącza input i przygasza wiersz.

Cała reszta przechodzi na <input>, gdzie należą onchange i aria-*.