Rând de setări

Prezentare generală

SettingsRow combină aspectul ListItem cu Switch. Afișează o etichetă nativă asociată cu comutatorul său. Aplicația dvs. furnizează conținutul rândului și gestionează toate actualizările preferințelor.

Utilizare

import { SettingsRow } from 'twenty-ui/components/settings';
import { IconBell } from 'twenty-ui/icon';

export const NotificationSetting = () => (
  <SettingsRow startElement={<IconBell aria-hidden />}>
    Notifications
  </SettingsRow>
);

Opțiuni vizuale

Comparați dimensiunile comutatoarelor și stările selectată, dezactivată și doar în citire.

Configurați comutatorul

Transmiteți proprietățile Switch direct către SettingsRow. Starea bifată, detaliile evenimentului, comportamentul pentru dezactivare și numai citire, dimensiunea, configurarea formularului nativ, handler-ele, referințele și compoziția de randare configurează comutatorul. children furnizează eticheta vizibilă a rândului. Utilizați checked și onCheckedChange atunci când aplicația dvs. gestionează valoarea. Handlerul primește următoarea stare bifată și detaliile evenimentului Base UI. Clicul pe etichetă sau pe comutator îl invocă o singură dată. Apelați eventDetails.cancel() pentru a respinge o modificare și păstrați neschimbată valoarea controlată atunci când modificarea este anulată.

import { useState } from 'react';
import { SettingsRow } from 'twenty-ui/components/settings';
import { IconBell } from 'twenty-ui/icon';

export const NotificationSetting = () => {
  const [enabled, setEnabled] = useState(false);

  return (
    <SettingsRow
      startElement={<IconBell aria-hidden />}
      checked={enabled}
      onCheckedChange={setEnabled}
    >
      Notifications
    </SettingsRow>
  );
};

Utilizați defaultChecked pentru o setare necontrolată. Utilizatorii de tastatură focalizează comutatorul și apasă pe Spațiu. disabled dezactivează controlul și aplică aspectul dezactivat al rândului. readOnly împiedică modificările, păstrând în același timp comutatorul focalizabil.

import { SettingsRow } from 'twenty-ui/components/settings';

export const WorkspaceSettings = () => (
  <>
    <SettingsRow disabled>Notifications</SettingsRow>
    <SettingsRow readOnly defaultChecked>
      Activity history
    </SettingsRow>
  </>
);

Conținutul rândului și textul accesibil

children, startElement și description acceptă noduri deținute de apelant. Elementele children furnizează numele accesibil al comutatorului, iar descrierea furnizează descrierea sa accesibilă. Păstrați conținutul din interiorul etichetei neinteractiv. Utilizați ListItemButton pentru rânduri de acțiune sau compuneți ListItem cu un link pentru navigare.

import { SettingsRow } from 'twenty-ui/components/settings';

export const WeeklyDigestSetting = () => (
  <SettingsRow defaultChecked description="Sent every Monday" name="digest">
    Weekly digest
  </SettingsRow>
);

Setați aria-label, aria-labelledby sau aria-describedby pentru a furniza propriul text accesibil pentru comutator. Un aria-label explicit înlocuiește asocierea de nume generată; valorile explicite aria-labelledby și aria-describedby înlocuiesc asocierile generate corespunzătoare.

Ținte native și compoziție

Proprietățile native obișnuite configurează controlul. Personalizarea etichetei are două nume explicite:

Proprietăți	Țintă
Atribute native, handler-e, `className`, `style`, `ref` și `render`	Rădăcina Switch vizibilă
`inputRef`, `name`, `value`, `uncheckedValue`, `required` și `form`	Caseta de selectare nativă subiacentă a Switch
`labelRef` și atribute, handler-e, clase și stiluri furnizate prin `labelRender`	Eticheta nativă exterioară

htmlFor al etichetei este gestionat intern și urmează id sau un ID de control generat atunci când nu este furnizat niciun ID. Cu compoziția Switch implicită, acest ID identifică caseta de selectare subiacentă. Cu nativeButton, acesta identifică butonul vizibil. ref vizează rădăcina vizibilă în ambele cazuri. Utilizați labelRender pentru a personaliza eticheta nativă a rândului. Păstrați un element label și transmiteți proprietățile callbackului de randare către elementul dvs. props.children al acestuia conține rândul complet, inclusiv comutatorul. Compoziția elementului îi îmbină clasele și stilurile cu valorile implicite ale rândului.

import { useRef } from 'react';
import { SettingsRow } from 'twenty-ui/components/settings';

export const ComposedNotificationSetting = () => {
  const labelRef = useRef<HTMLLabelElement>(null);
  const controlRef = useRef<HTMLElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <SettingsRow
      id="notification-control"
      ref={controlRef}
      inputRef={inputRef}
      nativeButton
      render={<button />}
      labelRef={labelRef}
      labelRender={<label id="notification-row" data-setting="notifications" />}
    >
      Notifications
    </SettingsRow>
  );
};

onClick primește clicurile pe control. Handler-ele native furnizate prin labelRender primesc evenimentele etichetei și evenimentele propagate ale controlului. Apelarea preventDefault() la un clic pe etichetă împiedică activarea controlului său nativ. Utilizați onCheckedChange pentru actualizările preferințelor, în loc să deduceți starea dintr-un clic pe etichetă. Comutatorul are implicit size="sm"; utilizați "md" pentru un comutator mai mare. Înălțimea rândului rămâne aceeași. focused aplică aspectul evidențiat al rândului fără a muta focalizarea tastaturii. className, style și render acceptă callbackuri de stare Switch și personalizează controlul. Furnizați clase și stiluri pentru etichetă prin labelRender pentru a personaliza rândul.

Rendererul componentei Front

În interiorul unei componente Front, utilizați compoziția de buton nativ pentru un comutator imbricat în eticheta rândului:

import { SettingsRow } from 'twenty-ui/components/settings';

export const FrontComponentNotificationSetting = () => (
  <SettingsRow nativeButton render={<button />}>
    Notifications
  </SettingsRow>
);

Această compoziție se activează o singură dată la clicul pe etichetă sau pe control. Puntea asincronă de evenimente a rendererului nu poate anula la timp activarea implicită a etichetei gazdă pentru un control bazat pe span, ceea ce poate produce callbackuri de modificare duplicate la un clic direct pe control. Atributele native de validare a formularelor, cum ar fi required, sunt filtrate și de rendererul curent. SettingsRow autonom păstrează contractul complet de formular al Switch.

Formulare și resetare

name, value și required configurează caseta de selectare subiacentă pentru trimiterea și validarea formularului. Un comutator bifat trimite valoarea sa. Un comutator nebifat omite valoarea, cu excepția cazului în care este furnizat uncheckedValue. Utilizați form pentru a asocia intrarea cu un formular din afara arborelui părinte al rândului. Pentru resetarea controlată a formularului, restaurați valoarea bifată gestionată de aplicație în handlerul onReset al formularului. Base UI 1.8 nu restaurează starea necontrolată a comutatorului la resetarea nativă a formularului. SettingsRow păstrează acest comportament din amonte.

import { useState } from 'react';
import { SettingsRow } from 'twenty-ui/components/settings';
import { Button } from 'twenty-ui/primitives/input';

export const NotificationPreferences = () => {
  const [enabled, setEnabled] = useState(true);

  return (
    <form onReset={() => setEnabled(true)}>
      <SettingsRow
        checked={enabled}
        onCheckedChange={setEnabled}
        name="notifications"
        value="enabled"
        uncheckedValue="disabled"
      >
        Notifications
      </SettingsRow>
      <Button type="reset">Reset</Button>
    </form>
  );
};

Proprietăți

boolean

Whether the switch is currently active.To render an uncontrolled switch, use the defaultChecked prop instead.

ReactNode

obligatoriu

Visible label and default accessible name of the switch. Use non-interactive node content.

string | ((state: SwitchRootState) => string | undefined)

Customizes the visible Switch root and accepts a Switch state callback.

boolean

implicit:"false"

Whether the switch is initially active.To render a controlled switch, use the checked prop instead.

ReactNode

Non-interactive supporting node content, used as the default accessible description of the switch.

boolean

implicit:"false"

Whether the component should ignore user interaction.

boolean

implicit:"false"

Applies the highlighted row style without moving keyboard focus.

string

Identifies the form that owns the hidden input. Useful when the switch is rendered outside the form.

string

Identifies the associated checkbox, or the visible root with nativeButton. The label association follows this ID.

Ref<HTMLInputElement>

Targets the underlying native checkbox.

Ref<HTMLLabelElement>

Targets the outer native label.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>

Customizes the outer native label with its complete composed row children. Preserve a label element and forward its props to retain control association.

string

Identifies the field when a form is submitted.

boolean

implicit:"false"

Whether the component renders a native <button> element when replacing it via the render prop. Set to true if the rendered element is a native button.

((checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void)

Receives the next checked value and Base UI event details. Controlled callers own accepted state updates; cancellation prevents a change.

((event: BaseUIEvent<MouseEvent<HTMLSpanElement, MouseEvent>>) => void)

Native click handler for the visible Switch root.

boolean

implicit:"false"

Whether the user should be unable to activate or deactivate the switch.

Ref<HTMLSpanElement>

Targets the visible Switch root, which defaults to a span.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchRootState>

Customizes the visible Switch root with control props and Switch state. Use nativeButton when composing a button.

boolean

implicit:"false"

Whether the user must activate the switch before submitting a form.

"md" | "sm"

implicit:"sm"

Visual size of the switch. Defaults to sm.

ReactNode

Non-interactive node content before the label.

CSSProperties | ((state: SwitchRootState) => CSSProperties | undefined)

Customizes the visible Switch root and accepts a Switch state callback.

string

The value submitted with the form when the switch is off. By default, unchecked switches do not submit any value, matching native checkbox behavior.

string

The value submitted with the form when the switch is on. By default, switch submits the “on” value, matching native checkbox behavior.

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Opțiuni vizuale

Configurați comutatorul

Conținutul rândului și textul accesibil

Ținte native și compoziție

Rendererul componentei Front

Formulare și resetare

Proprietăți

​Prezentare generală

​Utilizare

​Opțiuni vizuale

​Configurați comutatorul

​Conținutul rândului și textul accesibil

​Ținte native și compoziție

​Rendererul componentei Front

​Formulare și resetare

​Proprietăți

Prezentare generală

Utilizare

Opțiuni vizuale

Configurați comutatorul

Conținutul rândului și textul accesibil

Ținte native și compoziție

Rendererul componentei Front

Formulare și resetare

Proprietăți