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: Knoppen
|
|
image: /images/user-guide/views/filter.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Een lijst van knoppen en knopgroepen die in de app worden gebruikt.
|
|
|
|
## Knop
|
|
|
|
<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 | Soort | Beschrijving |
|
|
| ---------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | tekenreeks | Optionele klassennaam voor extra styling |
|
|
| Pictogram | `React.ComponentType` | Een optionele pictogramcomponent die in de knop wordt weergegeven |
|
|
| titel | tekenreeks | De tekstinhoud van de knop |
|
|
| volledigeBreedte | booleaan | Definieert of de knop de volledige breedte van zijn container moet beslaan |
|
|
| variant | tekenreeks | De visuele stijlvariant van de knop. Options include `primary`, `secondary`, and `tertiary` |
|
|
| grootte | tekenreeks | De grootte van de knop. Heeft twee opties: `klein` en `medium` |
|
|
| positie | tekenreeks | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` |
|
|
| accent | tekenreeks | De accentkleur van de knop. Options include: `default`, `blue`, and `danger` |
|
|
| binnenkort | booleaan | Geeft aan of de knop als "binnenkort" is gemarkeerd (zoals voor aanstaande functies) |
|
|
| uitgeschakeld | booleaan | Geeft aan of de knop is uitgeschakeld of niet |
|
|
| focus | booleaan | Geeft aan of de knop focus heeft |
|
|
| onClick | functie | Een terugroepfunctie die wordt geactiveerd wanneer de gebruiker op de knop klikt |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Knop Groep
|
|
|
|
<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">
|
|
|
|
| Props | Soort | Beschrijving |
|
|
| ------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| className | tekenreeks | Optionele naam voor extra styling |
|
|
| Pictogram | `React.ComponentType` | Een optionele pictogramcomponent die in de knop wordt weergegeven |
|
|
| titel | tekenreeks | De tekstinhoud van de knop |
|
|
| grootte | tekenreeks | De grootte van de knop. Heeft twee opties: `klein` en `medium` |
|
|
| positie | tekenreeks | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `middle`, `right` |
|
|
| schaduwToepassen | booleaan | Bepaalt of schaduw op een knop wordt toegepast |
|
|
| vervagingToepassen | booleaan | Bepaalt of een vervagingseffect op de knop wordt toegepast |
|
|
| uitgeschakeld | booleaan | Bepaalt of de knop is uitgeschakeld |
|
|
| focus | booleaan | Geeft aan of de knop focus heeft |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Drijvende Knop Groep
|
|
|
|
<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 | Soort | Beschrijving | Standaard |
|
|
| -------- | ---------- | ---------------------------------------------------------------------------------------------- | --------- |
|
|
| grootte | tekenreeks | De grootte van de knop. Heeft twee opties: `klein` en `medium` | klein |
|
|
| children | ReactNode | Een array van React-elementen die de individuele knoppen binnen de groep vertegenwoordigen | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Drijvende Pictogram Knop
|
|
|
|
<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">
|
|
|
|
| Props | Soort | Beschrijving |
|
|
| ------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | tekenreeks | Optionele naam voor extra styling |
|
|
| Pictogram | `React.ComponentType` | Een optionele pictogramcomponent die in de knop wordt weergegeven |
|
|
| grootte | tekenreeks | De grootte van de knop. Heeft twee opties: `klein` en `medium` |
|
|
| positie | tekenreeks | The position of the button in relation to its siblings. Options include: `standalone`, `left`, `right`, and `middle` |
|
|
| schaduwToepassen | booleaan | Bepaalt of schaduw op een knop wordt toegepast |
|
|
| vervagingToepassen | booleaan | Bepaalt of een vervagingseffect op de knop wordt toegepast |
|
|
| uitgeschakeld | booleaan | Bepaalt of de knop is uitgeschakeld |
|
|
| focus | booleaan | Geeft aan of de knop focus heeft |
|
|
| onClick | functie | Een terugroepfunctie die wordt geactiveerd wanneer de gebruiker op de knop klikt |
|
|
| isActive | booleaan | Bepaalt of de knop in een actieve staat is |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Drijvende Pictogram Knop Groep
|
|
|
|
<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 | Soort | Beschrijving |
|
|
| ---------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | tekenreeks | Optionele naam voor extra styling |
|
|
| grootte | tekenreeks | De grootte van de knop. Heeft twee opties: `klein` en `medium` |
|
|
| pictogramKnoppen | lijst | Een array van objecten, elk vertegenwoordigt een pictogramknop in de groep. Elk object moet de pictogramcomponent bevatten die je in de knop wilt weergeven, de functie die je wilt aanroepen wanneer een gebruiker op de knop klikt, en of de knop actief moet zijn of niet. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Lichte Knop
|
|
|
|
<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 | Soort | Beschrijving |
|
|
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
|
|
| className | tekenreeks | Optionele naam voor extra styling |
|
|
| pictogram | `React.ReactNode` | Het pictogram dat je in de knop wilt weergeven |
|
|
| titel | tekenreeks | De tekstinhoud van de knop |
|
|
| accent | tekenreeks | De accentkleur van de knop. Options include: `secondary` and `tertiary` |
|
|
| actief | booleaan | Bepaalt of de knop in een actieve staat is |
|
|
| uitgeschakeld | booleaan | Bepaalt of de knop is uitgeschakeld |
|
|
| focus | booleaan | Geeft aan of de knop focus heeft |
|
|
| onClick | functie | Een terugroepfunctie die wordt geactiveerd wanneer de gebruiker op de knop klikt |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Lichte Pictogram Knop
|
|
|
|
<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">
|
|
|
|
| Props | Soort | Beschrijving |
|
|
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------------- |
|
|
| className | tekenreeks | Optionele naam voor extra styling |
|
|
| testId | tekenreeks | Test identificatie voor de knop |
|
|
| Pictogram | `React.ComponentType` | Een optionele pictogramcomponent die in de knop wordt weergegeven |
|
|
| titel | tekenreeks | De tekstinhoud van de knop |
|
|
| grootte | tekenreeks | De grootte van de knop. Heeft twee opties: `klein` en `medium` |
|
|
| accent | tekenreeks | De accentkleur van de knop. Options include: `secondary` and `tertiary` |
|
|
| actief | booleaan | Bepaalt of de knop in een actieve staat is |
|
|
| uitgeschakeld | booleaan | Bepaalt of de knop is uitgeschakeld |
|
|
| focus | booleaan | Geeft aan of de knop focus heeft |
|
|
| onClick | functie | Een terugroepfunctie die wordt geactiveerd wanneer de gebruiker op de knop klikt |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Hoofd Knop
|
|
|
|
<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 | Soort | Beschrijving |
|
|
| -------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
|
| titel | tekenreeks | De tekstinhoud van de knop |
|
|
| volledigeBreedte | booleaan | Definieert of de knop de volledige breedte van zijn container moet beslaan |
|
|
| variant | tekenreeks | De visuele stijlvariant van de knop. Options include `primary` and `secondary` |
|
|
| binnenkort | booleaan | Geeft aan of de knop als "binnenkort" is gemarkeerd (zoals voor aanstaande functies) |
|
|
| Pictogram | `React.ComponentType` | Een optionele pictogramcomponent die in de knop wordt weergegeven |
|
|
| React `button` props | `React.ComponentProps<'button'>` | Alle standaard HTML-knop eigenschappen worden ondersteund |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Afgeronde Pictogram Knop
|
|
|
|
<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 | Soort | Beschrijving |
|
|
| -------------------- | ----------------------------------------------- | ------------ |
|
|
| Pictogram | `React.ComponentType` | |
|
|
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|