github-actions[bot]
2de681da72
Created by Github action <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22317?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> Co-authored-by: github-actions <github-actions@twenty.com>
523 lines
19 KiB
Plaintext
523 lines
19 KiB
Plaintext
---
|
|
title: Butoane
|
|
icon: hand-pointer
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Antet" />
|
|
</Frame>
|
|
|
|
O listă de butoane și grupuri de butoane utilizate în întreaga aplicație.
|
|
|
|
## Buton
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Utilizare">
|
|
|
|
```jsx
|
|
import { Button } from "@/ui/input/button/components/Button";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="Title"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
size="medium"
|
|
position="standalone"
|
|
accent="default"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere |
|
|
| -------------- | --------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
| numeClasa | șir | Nume de clasă opțional pentru stilizare suplimentară |
|
|
| Pictogramă | `React.ComponentType` | Un component de pictogramă opțional care este afișat în cadrul butonului |
|
|
| titlu | șir | Conținutul text al butonului |
|
|
| lățimeCompletă | boolean | Definește dacă butonul ar trebui să se extindă pe toată lățimea containerului său |
|
|
| variantă | șir | Varianta stilului vizual al butonului. Opțiunile includ `primar`, `secundar` și `terțiar` |
|
|
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
|
|
| poziție | șir | Poziția butonului în raport cu frații săi. Opțiunile includ: `independent`, `stânga`, `dreapta` și `mijloc` |
|
|
| accent | șir | Culoarea accentului butonului. Opțiunile includ: `implicit`, `albastru` și `pericol` |
|
|
| în curând | boolean | Indică dacă butonul este marcat ca "în curând" (de exemplu, pentru funcționalități viitoare) |
|
|
| dezactivat | boolean | Specifică dacă butonul este dezactivat sau nu |
|
|
| focalizare | boolean | Determină dacă butonul are focalizare |
|
|
| laClick | funcție | O funcție de apel de întoarcere care se declanșează când utilizatorul face clic pe buton |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Grup de Butoane
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizare">
|
|
```jsx
|
|
import { Button } from "@/ui/input/button/components/Button";
|
|
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<ButtonGroup variant="primary" size="large" accent="blue" className>
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="Button 1"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
size="medium"
|
|
position="standalone"
|
|
accent="blue"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="Button 2"
|
|
fullWidth={false}
|
|
variant="secondary"
|
|
size="medium"
|
|
position="left"
|
|
accent="blue"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
<Button
|
|
className
|
|
Icon={null}
|
|
title="Button 3"
|
|
fullWidth={false}
|
|
variant="tertiary"
|
|
size="medium"
|
|
position="right"
|
|
accent="blue"
|
|
soon={false}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
</ButtonGroup>
|
|
);
|
|
};
|
|
|
|
```
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere |
|
|
| ----------- | --------- | -------------------------------------------------------------------------------------------------------------- |
|
|
| variantă | șir | Varianta stilului vizual al butoanelor din cadrul grupului. Opțiunile includ `primar`, `secundar` și `terțiar` |
|
|
| dimensiune | șir | Dimensiunea butoanelor din cadrul grupului. Are două opțiuni: `mediu` și `mic` |
|
|
| accent | șir | Culoarea accentului butoanelor din cadrul grupului. Opțiunile includ `implicit`, `albastru` și `pericol` |
|
|
| numeClasa | șir | Nume de clasă opțional pentru stilizare suplimentară |
|
|
| copii | ReactNode | O matrice de elemente React care reprezintă butoanele individuale din cadrul grupului |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Buton Plutitor
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizare">
|
|
|
|
```jsx
|
|
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingButton
|
|
className
|
|
Icon={IconSearch}
|
|
title="Title"
|
|
size="medium"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={true}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere |
|
|
| ----------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
|
|
| Pictogramă | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului |
|
|
| titlu | șir | Conținutul textului butonului |
|
|
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
|
|
| poziție | șir | Poziția butonului în raport cu frații săi. Opțiunile includ: `standalone`, `left`, `middle`, `right` |
|
|
| applyUmbră | boolean | Determină dacă să aplice umbra unui buton |
|
|
| Aplaurează | boolean | Determină dacă să aplice un efect de estompare pe buton |
|
|
| dezactivat | boolean | Determină dacă butonul este dezactivat |
|
|
| focalizare | boolean | Indică dacă butonul este focusat |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Grup butoane plutitoare
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizare">
|
|
|
|
```jsx
|
|
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
|
|
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
|
|
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingButtonGroup size="small">
|
|
<FloatingButton
|
|
className
|
|
Icon={IconClipboardText}
|
|
title
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={true}
|
|
/>
|
|
<FloatingButton
|
|
className
|
|
Icon={IconCheckbox}
|
|
title
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
/>
|
|
</FloatingButtonGroup>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere | Implicit |
|
|
| ----------- | --------- | ------------------------------------------------------------------------------------- | -------- |
|
|
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` | mic |
|
|
| copii | ReactNode | O matrice de elemente React care reprezintă butoanele individuale din cadrul grupului | |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Buton Pictogramă Plutitor
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizare">
|
|
|
|
```jsx
|
|
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<FloatingIconButton
|
|
className
|
|
Icon={IconSearch}
|
|
size="small"
|
|
position="standalone"
|
|
applyShadow={true}
|
|
applyBlur={true}
|
|
disabled={false}
|
|
focus={false}
|
|
onClick={() => console.log("click")}
|
|
isActive={true}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere |
|
|
| ----------- | --------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
|
|
| Pictogramă | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului |
|
|
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
|
|
| poziție | șir | Poziția butonului în raport cu frații săi. Opțiunile includ: `independent`, `stânga`, `dreapta` și `mijloc` |
|
|
| applyUmbră | boolean | Determină dacă să aplice umbra unui buton |
|
|
| Aplaurează | boolean | Determină dacă să aplice un efect de estompare pe buton |
|
|
| dezactivat | boolean | Determină dacă butonul este dezactivat |
|
|
| focalizare | boolean | Indică dacă butonul este focusat |
|
|
| laClick | funcție | O funcție callback care se declanșează când utilizatorul face click pe buton |
|
|
| esteActiv | boolean | Determină dacă butonul este în stare activă |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Grup de butoane plutitoare
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizare">
|
|
|
|
```jsx
|
|
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
|
|
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
const iconButtons = [
|
|
{
|
|
Icon: IconClipboardText,
|
|
onClick: () => console.log("Button 1 clicked"),
|
|
isActive: true,
|
|
},
|
|
{
|
|
Icon: IconCheckbox,
|
|
onClick: () => console.log("Button 2 clicked"),
|
|
isActive: true,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<FloatingIconButtonGroup
|
|
className
|
|
size="small"
|
|
iconButtons={iconButtons} />
|
|
);
|
|
};
|
|
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere |
|
|
| ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
|
|
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
|
|
| iconButtons | matrice | O serie de obiecte, fiecare reprezentând un buton de pictogramă din grup. Fiecare obiect ar trebui să includă componenta pictogramă pe care doriți să o afișați în buton, funcția pe care doriți să o apelați când un utilizator face clic pe buton și dacă butonul ar trebui să fie activ sau nu. |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Buton luminos
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizare">
|
|
|
|
```jsx
|
|
import { LightButton } from "@/ui/input/button/components/LightButton";
|
|
|
|
export const MyComponent = () => {
|
|
return <LightButton
|
|
className
|
|
icon={null}
|
|
title="Title"
|
|
accent="secondary"
|
|
active={false}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={()=>console.log('click')}
|
|
/>;
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere |
|
|
| ----------- | ----------------- | ---------------------------------------------------------------------------- |
|
|
| numeClasa | șir | Nume opțional pentru stilizare suplimentară |
|
|
| pictogramă | `React.ReactNode` | Pictograma pe care doriţi să o afişaţi în buton |
|
|
| titlu | șir | Conținutul textului butonului |
|
|
| accent | șir | Culoarea de accent a butonului. Opțiunile includ: `secundar` și `terțiar` |
|
|
| activ | boolean | Determină dacă butonul este în stare activă |
|
|
| dezactivat | boolean | Determină dacă butonul este dezactivat |
|
|
| focalizare | boolean | Indică dacă butonul este focusat |
|
|
| laClick | funcție | O funcție callback care se declanșează când utilizatorul face click pe buton |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Buton Pictogramă Luminoasă
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizare">
|
|
|
|
```jsx
|
|
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<LightIconButton
|
|
className
|
|
testId="test1"
|
|
Icon={IconSearch}
|
|
title="Title"
|
|
size="small"
|
|
accent="secondary"
|
|
active={true}
|
|
disabled={false}
|
|
focus={true}
|
|
onClick={() => console.log("click")}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere |
|
|
| ----------- | --------------------- | ---------------------------------------------------------------------------- |
|
|
| numeClasă | șir | Nume opțional pentru stilizare suplimentară |
|
|
| idTest | șir | Identificator test pentru buton |
|
|
| Pictogramă | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului |
|
|
| titlu | șir | Conținutul textului butonului |
|
|
| dimensiune | șir | Dimensiunea butonului. Are două opțiuni: `mic` și `mediu` |
|
|
| accent | șir | Culoarea de accent a butonului. Opțiunile includ: `secundar` și `terțiar` |
|
|
| activ | boolean | Determină dacă butonul este într-o stare activă |
|
|
| dezactivat | boolean | Determină dacă butonul este dezactivat |
|
|
| focalizare | boolean | Indică dacă butonul este focusat |
|
|
| laClick | funcție | O funcție callback care se declanșează când utilizatorul face click pe buton |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Buton Principal
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizare">
|
|
|
|
```jsx
|
|
import { MainButton } from "@/ui/input/button/components/MainButton";
|
|
import { IconCheckbox } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<MainButton
|
|
title="Checkbox"
|
|
fullWidth={false}
|
|
variant="primary"
|
|
soon={false}
|
|
Icon={IconCheckbox}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere |
|
|
| ---------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
| titlu | șir | Conținutul textului butonului |
|
|
| lățimeCompletă | boolean | Definește dacă butonul ar trebui să ocupe toată lățimea containerului său |
|
|
| variantă | șir | Stilul vizual al butonului. Opțiunile includ `primar` și `secundar` |
|
|
| în curând | boolean | Indică dacă butonul este marcat ca "în curând" (de exemplu, pentru funcționalități viitoare) |
|
|
| Pictogramă | `React.ComponentType` | O componentă opțională de pictogramă afișată în cadrul butonului |
|
|
| Reacţionaţi `button` reclame | `React.ComponentProps<'button'>` | Toate variantele standard pentru butoanele HTML sunt acceptate |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Buton Pictogramă Rotundă
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizare">
|
|
|
|
```jsx
|
|
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
|
|
import { IconSearch } from "@tabler/icons-react";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<RoundedIconButton
|
|
Icon={IconSearch}
|
|
/>
|
|
);
|
|
};
|
|
```
|
|
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Proprietăți">
|
|
|
|
|
|
| Proprietăți | Tip | Descriere |
|
|
| ---------------------------- | ----------------------------------------------- | --------- |
|
|
| Pictogramă | `React.ComponentType` | |
|
|
| Reacţionaţi `button` reclame | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|