github-actions[bot]
d5c1f4e10a
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
523 lines
19 KiB
Plaintext
523 lines
19 KiB
Plaintext
---
|
|
title: Butoane
|
|
icon: cursor mână
|
|
---
|
|
|
|
<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 | Specifies whether the button is disabled or not |
|
|
| 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. Options include: `standalone`, `left`, `middle`, `right` |
|
|
| applyShadow | boolean | Determines whether to apply shadow to a button |
|
|
| applyBlur | boolean | Determines whether to apply a blur effect to the button |
|
|
| dezactivat | boolean | Determină dacă butonul este dezactivat |
|
|
| focalizare | boolean | Indică dacă butonul este focusat |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Floating Button Group
|
|
|
|
<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` |
|
|
| applyShadow | boolean | Determines whether to apply shadow to a button |
|
|
| applyBlur | boolean | Determines whether to apply a blur effect to the button |
|
|
| 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>
|
|
|
|
## Floating Icon Button Group
|
|
|
|
<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 | An array of objects, each representing an icon button in the group. Each object should include the icon component you want to display in the button, the function you want to call when a user clicks on the button, and whether the button should be active or not. |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Light Button
|
|
|
|
<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` | The icon you want to display in the button |
|
|
| 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 |
|
|
| React `button` props | `React.ComponentProps<'button'>` | All standard HTML button props are supported |
|
|
|
|
|
|
|
|
|
|
</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` | |
|
|
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|