github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
489 lines
20 KiB
Plaintext
489 lines
20 KiB
Plaintext
---
|
|
title: Botons
|
|
image: /images/user-guide/views/filter.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Una llista de botons i grups de botons utilitzats a tota l'aplicació.
|
|
|
|
## Botó
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Props | Tipus | Descripció |
|
|
| ------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| nomDeClasse | cadena | Optional class name for additional styling |
|
|
| Icona | `React.ComponentType` | Un component d'icona opcional que es mostra dins del botó |
|
|
| títol | cadena | El contingut de text del botó |
|
|
| ampleComplet | boolean | Defineix si el botó ha d'abastar tota l'amplada del seu contenidor |
|
|
| variant | cadena | L'estil visual del botó. Les opcions inclouen `primari`, `secundari`, i `terciari` |
|
|
| tamany | cadena | La mida del botó. Té dues opcions: `petit` i `mitjà` |
|
|
| posició | cadena | La posició del botó en relació amb els seus veïns. Les opcions inclouen: `independent`, `esquerra`, `dreta`, i `mig` |
|
|
| accent | cadena | El color d'accent del botó. Les opcions inclouen: `per defecte`, `blau`, i `perill` |
|
|
| properament | boolean | Indica si el botó està marcat com a "aviat" (com per a funcions pròximes) |
|
|
| desactivat | boolean | Especifica si el botó està desactivat o no |
|
|
| focus | boolean | Determina si el botó té el focus |
|
|
| onClick | funció | Una funció de devolució de trucada que es desencadena quan l'usuari fa clic al botó |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Grup de Botons
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
```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="Props">
|
|
|
|
|
|
| Props | Type | Description |
|
|
|-------|------|-------------|
|
|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
|
|
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
|
|
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
|
|
| className | string | Optional class name for additional styling |
|
|
| children | ReactNode | An array of React elements representing the individual buttons within the group |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
|
|
## Floating Button
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Propietats | Tipus | Descripció |
|
|
| -------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| nomDeClasse | cadena | Nom opcional per a un estil addicional |
|
|
| Icona | `React.ComponentType` | Un component d'icona opcional que es mostra dins del botó |
|
|
| títol | cadena | El contingut de text del botó |
|
|
| tamany | cadena | La mida del botó. Té dues opcions: `petit` i `mitjà` |
|
|
| posició | cadena | La posició del botó en relació amb els seus veïns. Les opcions inclouen: `independent`, `esquerra`, `mig`, `dreta` |
|
|
| aplicarOmbra | boolean | Determina si ha d'aplicar una ombra a un botó |
|
|
| aplicarDesenfocament | boolean | Determina si ha d'aplicar un efecte de desenfocament al botó |
|
|
| desactivat | boolean | Determina si el botó està desactivat |
|
|
| focus | boolean | Indica si el botó té focus |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Grup de Botons Flotants
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Props | Tipus | Descripció | Per defecte |
|
|
| -------- | --------- | ------------------------------------------------------------------------------------ | ----------- |
|
|
| tamany | cadena | La mida del botó. Té dues opcions: `petit` i `mitjà` | petit |
|
|
| children | ReactNode | Una llista d'elements React que representen els botons individuals dins del grup | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botó d'Icona Flotant
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Propietats | Tipus | Descripció |
|
|
| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | cadena | Nom opcional per a un estil addicional |
|
|
| Icona | `React.ComponentType` | Un component d'icona opcional que es mostra dins del botó |
|
|
| tamany | cadena | La mida del botó. Té dues opcions: `petit` i `mitjà` |
|
|
| posició | cadena | La posició del botó en relació amb els seus veïns. Les opcions inclouen: `independent`, `esquerra`, `dreta`, i `mig` |
|
|
| aplicarOmbra | boolean | Determina si ha d'aplicar una ombra a un botó |
|
|
| aplicarDesenfocament | boolean | Determina si ha d'aplicar un efecte de desenfocament al botó |
|
|
| desactivat | boolean | Determina si el botó està desactivat |
|
|
| focus | boolean | Indica si el botó té focus |
|
|
| onClick | funció | Una funció de devolució de trucada que es desencadena quan l'usuari fa clic al botó |
|
|
| estàActiu | boolean | Determina si el botó està en estat actiu |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Grup de Botons d'Icona Flotant
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Props | Tipus | Descripció |
|
|
| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| nomDeClasse | cadena | Nom opcional per a un estil addicional |
|
|
| tamany | cadena | La mida del botó. Té dues opcions: `petit` i `mitjà` |
|
|
| botons d'icona | conjunt | An array of objects, each representing an icon button in the group. Cada objecte ha d'incloure el component d'icona que es vol mostrar en el botó, la funció que es vol cridar quan l'usuari faci clic en el botó i si el botó ha d'estar actiu o no. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botó Lleuger
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Props | Tipus | Descripció |
|
|
| ----------- | ----------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
| nomDeClasse | cadena | Nom opcional per a un estil addicional |
|
|
| icona | `React.ReactNode` | La icona que es vol mostrar en el botó |
|
|
| títol | cadena | El contingut de text del botó |
|
|
| accent | cadena | El color d'accent del botó. Les opcions inclouen: `secundari` i `terciari` |
|
|
| actiu | boolean | Determina si el botó està en estat actiu |
|
|
| desactivat | boolean | Determina si el botó està desactivat |
|
|
| focus | boolean | Indica si el botó té focus |
|
|
| onClick | funció | Una funció de devolució de trucada que es desencadena quan l'usuari fa clic al botó |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botó d'Icona Lleuger
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Propietats | Tipus | Descripció |
|
|
| ------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
| nomDeClasse | cadena | Nom opcional per a un estil addicional |
|
|
| identificadorProva | cadena | Identificador de prova per al botó |
|
|
| Icona | `React.ComponentType` | Un component d'icona opcional que es mostra dins del botó |
|
|
| títol | cadena | El contingut de text del botó |
|
|
| tamany | cadena | La mida del botó. Té dues opcions: `petit` i `mitjà` |
|
|
| accent | cadena | El color d'accent del botó. Les opcions inclouen: `secundari` i `terciari` |
|
|
| actiu | boolean | Determina si el botó està en estat actiu |
|
|
| desactivat | boolean | Determina si el botó està desactivat |
|
|
| focus | boolean | Indica si el botó té focus |
|
|
| onClick | funció | Una funció de devolució de trucada que es desencadena quan l'usuari fa clic al botó |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botó Principal
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Props | Tipus | Descripció |
|
|
| -------------------- | -------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
| títol | cadena | El contingut de text del botó |
|
|
| ampleComplet | boolean | Defineix si el botó ha d'abastar tota l'amplada del seu contenidor |
|
|
| variant | cadena | L'estil visual del botó. Options include `primary` and `secondary` |
|
|
| properament | boolean | Indica si el botó està marcat com a "aviat" (com per a funcions pròximes) |
|
|
| Icona | `React.ComponentType` | Un component d'icona opcional que es mostra dins del botó |
|
|
| React `button` props | `React.ComponentProps<'button'>` | Totes les propietats estàndard HTML del botó són compatibles |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Botó d'icona arrodonida
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```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="Props">
|
|
|
|
| Props | Tipus | Descripció |
|
|
| -------------------- | ----------------------------------------------- | ---------- |
|
|
| Icona | `React.ComponentType` | |
|
|
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|