ButtonGroup

Prezentare generală

Oferiți unui grup un nume accesibil și plasați în interiorul acestuia butoanele asociate. Grupul unește marginile adiacente și poate aplica valori implicite pentru dimensiune, variantă și culoare. Butoanele își păstrează propriile opriri de tabulare.

Utilizare

import { IconCheckbox, IconNotes, IconTimelineEvent } from 'twenty-ui/icon';
import { Button, ButtonGroup } from 'twenty-ui/primitives/input';

export const ActivityActions = () => (
  <ButtonGroup aria-label="Create activity" size="sm">
    <Button startIcon={<IconNotes />}>Note</Button>
    <Button startIcon={<IconCheckbox />}>Task</Button>
    <Button startIcon={<IconTimelineEvent />}>Activity</Button>
  </ButtonGroup>
);

Gestionarea stării

ButtonGroup coordonează aspectul, nu selecția. Nu are un mod de selecție controlat sau necontrolat. Fiecare buton primește propriul gestionar de acțiuni și propria stare a aplicației; consultați exemplul de gestionare a stării pentru Button pentru comportamentul de încărcare. Pentru o alegere reciproc exclusivă, utilizați RadioGroup, care gestionează selecția pentru controalele sale radio.

Precedența aspectului

Fiecare proprietate de aspect se rezolvă independent: proprietatea explicită a copilului, apoi valoarea implicită a grupului, apoi valoarea implicită a componentei. Acest lucru se aplică atât pentru Button, cât și pentru IconButton, inclusiv pentru un IconButton size="xs" explicit. Valorile implicite ajung la copii prin fragmente, învelișuri și ancore pentru tooltip. Un grup poate furniza color="inherit" pe o suprafață colorată. Un element copil care se rezolvă la culoarea moștenită trebuie, de asemenea, să se rezolve la o variantă nesolidă. Suprascrierile explicite ale culorii și variantei elementului copil au prioritate, astfel încât un element copil poate alege o variantă nesolidă sau o culoare semantică atunci când grupul furnizează împreună solid și inherit. Păstrați butoanele atașate la aceeași dimensiune, astfel încât marginile lor să fie aliniate. Acest exemplu suprascrie varianta și culoarea, moștenind în același timp dimensiunea grupului.

import { Button, ButtonGroup } from 'twenty-ui/primitives/input';

export const ActivityActions = () => (
  <ButtonGroup
    aria-label="Activity actions"
    variant="solid"
    color="accent"
    size="sm"
  >
    <Button variant="ghost" color="danger">
      Delete activity
    </Button>
    <Button color="neutral">Duplicate activity</Button>
    <Button>New activity</Button>
  </ButtonGroup>
);

Controale detașate

Setați attached={false} pentru a păstra colțurile rotunjite ale fiecărui control și un spațiu de 2 px. Valorile implicite ale grupului se aplică în continuare prin intermediul wrapperelor și al ancorelor pentru indicii; proprietățile explicite ale elementelor copil au prioritate.

Controale încadrate

Setați framed pentru a adăuga un fundal translucid, o bordură, spațiere interioară de 2 px și colțuri concentrice. Cadrul funcționează cu controale atașate sau detașate și păstrează aspectul explicit al elementelor copil. Utilizați size="xs" pentru IconButton pentru acțiuni compacte de 20 px.

import { IconButton } from 'twenty-ui/components/input';
import { IconPlus, IconTrash } from 'twenty-ui/icon';
import { ButtonGroup } from 'twenty-ui/primitives/input';

export const CompactRecordActions = () => (
  <ButtonGroup framed attached={false} aria-label="Record actions">
    <IconButton size="xs" aria-label="Add" variant="ghost">
      <IconPlus />
    </IconButton>
    <IconButton size="xs" aria-label="Delete" variant="ghost" disabled>
      <IconTrash />
    </IconButton>
  </ButtonGroup>
);

Actualizarea grupurilor existente

Înlocuiți IconButtonGroup și matricea sa iconButtons cu ButtonGroup framed attached={false} și elemente copil explicite. Înlocuiți InsideButton cu LightIconButton size="xs". Fiecare buton își gestionează numele accesibil, gestionarul de acțiuni, starea dezactivată și indiciul opțional.

Proprietăți

boolean

implicit:"true"

Join adjacent controls. Set to false for independently rounded buttons with a 2px gap.

"accent" | "danger" | "inherit" | "neutral" | "success"

Default semantic color for children without an explicit color. Inherited color requires each child to resolve to a non-solid variant; explicit child overrides take precedence.

boolean

implicit:"false"

Add a translucent frame with padding and concentric corners. Button sizes and appearance remain independent unless set on the group.

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

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

"md" | "sm"

Default button height for children without an explicit size.

"ghost" | "link" | "outline" | "soft" | "solid"

Default surface treatment for children without an explicit variant.

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Gestionarea stării

Precedența aspectului

Controale detașate

Controale încadrate

Actualizarea grupurilor existente

Proprietăți

​Prezentare generală

​Utilizare

​Gestionarea stării

​Precedența aspectului

​Controale detașate

​Controale încadrate

​Actualizarea grupurilor existente

​Proprietăți

Prezentare generală

Utilizare

Gestionarea stării

Precedența aspectului

Controale detașate

Controale încadrate

Actualizarea grupurilor existente

Proprietăți