SettingRow

Jedna linia listy ustawień: tytuł i objaśnienie po lewej, dowolna kontrolka po prawej. Na wąskim ekranie kontrolka przechodzi pod spód.

PodglądLink do sekcji Podgląd

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

Interface language

Applies to menus and messages after a reload.

Defaults

Restores every setting in this section.

Interface language

Applies to menus and messages after a reload.

Defaults

Restores every setting in this section.

Interface language

Applies to menus and messages after a reload.

Defaults

Restores every setting in this section.

tsx

import { SettingRow } from '@skribly/ui/forms'

tsx

<SettingRow title="Interface language" description="Applies after a reload.">
  {(control) => <select {...control}>…</select>}
</SettingRow>

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

Przekaż funkcję, aby dostać aria-labelledby i aria-describedby dla kontrolki, dzięki czemu tytuł wiersza ją nazywa.
Wiersze są rozdzielone ramką, a nie tylko odstępem.

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