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: Knoppies
|
||
image: /images/user-guide/views/filter.png
|
||
---
|
||
|
||
<Frame>
|
||
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
||
</Frame>
|
||
|
||
’n Lys van knoppies en knoppiegroepe wat deur die toepassing gebruik word.
|
||
|
||
## Knoppie
|
||
|
||
<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">
|
||
|
||
| Eienskappe | Tipe | Beskrywing |
|
||
| ------------ | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| klasNaam | string | Opsionele klasnaam vir bykomende styl |
|
||
| Ikoon | `Reageer.ComponentType` | ‘n Opsionele ikoon komponent wat binne die knoppie vertoon word. |
|
||
| titel | string | Die teksinhoud van die knoppie. |
|
||
| volleBreedte | booleaanse | Bepaal of die knoppie oor die hele breedte van sy houer behoort te strek. |
|
||
| variant | string | Die visuele stylvariant van die knoppie. Options include `primary`, `secondary`, and `tertiary` |
|
||
| grootte | string | Die grootte van die knoppie. Het twee opsies: `klein` en `medium` |
|
||
| posisie | string | Die posisie van die knoppie in verhouding tot sy sibbe. Opsies sluit in: `standalone`, `links`, `regs`, en `middel` |
|
||
| aksent | string | Die aksentkleur van die knoppie. Opsies sluit in: `standaard`, `blou`, en `gevaar` |
|
||
| binnekort | booleaanse | Dui aan of die knoppie gemerk is as "binnekort" (soos vir komende funksies). |
|
||
| gedeaktiveer | booleaanse | Spesifiseer of die knoppie gedeaktiveer is of nie |
|
||
| fokus | booleaanse | Bepaal of die knoppie gefokus is |
|
||
| onClick | funksie | ‘n Terugroepfunksie wat geaktiveer word wanneer die gebruiker op die knoppie klik. |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Button Group
|
||
|
||
<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">
|
||
|
||
| Eienskappe | Tipe | Beskrywing |
|
||
| ------------ | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| klasNaam | string | Opsionele naam vir bykomende styl |
|
||
| Ikoon | `Reageer.ComponentType` | ‘n Opsionele ikoon komponent wat binne die knoppie vertoon word. |
|
||
| titel | string | Die teksinhoud van die knoppie. |
|
||
| grootte | string | Die grootte van die knoppie. Het twee opsies: `klein` en `medium` |
|
||
| posisie | string | Die posisie van die knoppie in verhouding tot sy sibbe. Opsies sluit in: `selfstandige`, `links`, `middel`, `regs` |
|
||
| toevoegSkadu | booleaanse | Bepaal of skaduwee op 'n knoppie toegepas moet word |
|
||
| toevoegWazig | booleaanse | Bepaal of 'n wazige effek op die knoppie toegepas moet word |
|
||
| gedeaktiveer | booleaanse | Bepaal of die knoppie gedeaktiveer is. |
|
||
| fokus | booleaanse | Dui aan of die knoppie fokus het. |
|
||
|
||
</Tab>
|
||
</Tabs>
|
||
|
||
## Drywende Knoppie 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">
|
||
|
||
| Eienskappe | Tipe | Beskrywing | Standaard |
|
||
| ---------- | --------- | ------------------------------------------------------------------------------------------------- | --------- |
|
||
| grootte | string | Die grootte van die knoppie. Het twee opsies: `klein` en `medium` | klein |
|
||
| kinders | ReactNode | ’n Array van React-elemente wat die individuele knoppies binne die groep voorstel | |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Drywende Ikoon Knoppie
|
||
|
||
<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">
|
||
|
||
| Eienskappe | Tipe | Beskrywing |
|
||
| ------------ | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| klasNaam | string | Opsionele naam vir bykomende styl |
|
||
| Ikoon | `Reageer.ComponentType` | ‘n Opsionele ikoon komponent wat binne die knoppie vertoon word. |
|
||
| grootte | string | Die grootte van die knoppie. Het twee opsies: `klein` en `medium` |
|
||
| posisie | string | Die posisie van die knoppie in verhouding tot sy sibbe. Opsies sluit in: `standalone`, `links`, `regs`, en `middel` |
|
||
| toevoegSkadu | booleaanse | Bepaal of skaduwee op 'n knoppie toegepas moet word |
|
||
| toevoegWazig | booleaanse | Bepaal of 'n wazige effek op die knoppie toegepas moet word |
|
||
| gedeaktiveer | booleaanse | Bepaal of die knoppie gedeaktiveer is. |
|
||
| fokus | booleaanse | Dui aan of die knoppie fokus het. |
|
||
| onClick | funksie | ‘n Terugroepfunksie wat geaktiveer word wanneer die gebruiker op die knoppie klik. |
|
||
| isAktief | booleaanse | Bepaal of die knoppie in 'n aktiewe toestand is. |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Drywende Ikoon Knoppie 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">
|
||
|
||
| Eienskappe | Tipe | Beskrywing |
|
||
| ------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| klasNaam | string | Opsionele naam vir bykomende styl |
|
||
| grootte | string | Die grootte van die knoppie. Het twee opsies: `klein` en `medium` |
|
||
| ikoonKnoppies | reeks | ’n Reeks van voorwerpe, elk wat ’n ikoonknoppie in die groep voorstel. Elkeen moet die ikoonkomponent insluit wat jy in die knoppie wil vertoon, die funksie wat jy wil oproep wanneer 'n gebruiker op die knoppie klik en of die knoppie aktief moet wees of nie. |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Ligknoppie
|
||
|
||
<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">
|
||
|
||
| Eienskappe | Tipe | Beskrywing |
|
||
| ------------ | ----------------- | --------------------------------------------------------------------------------------------------------- |
|
||
| klasNaam | string | Opsionele naam vir bykomende styl |
|
||
| ikoon | `React.ReactNode` | Die ikoon wat jy in die knoppie wil vertoon |
|
||
| titel | string | Die teksinhoud van die knoppie. |
|
||
| aksent | string | Die aksentkleur van die knoppie. Opsies sluit in: `sekondêr` en `tersiêr` |
|
||
| aktief | booleaanse | Bepaal of die knoppie in 'n aktiewe toestand is. |
|
||
| gedeaktiveer | booleaanse | Bepaal of die knoppie gedeaktiveer is. |
|
||
| fokus | booleaanse | Dui aan of die knoppie fokus het. |
|
||
| onClick | funksie | ‘n Terugroepfunksie wat geaktiveer word wanneer die gebruiker op die knoppie klik. |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Ligte Ikoon Knoppie
|
||
|
||
<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">
|
||
|
||
| Eienskappe | Tipe | Beskrywing |
|
||
| ------------ | ----------------------- | --------------------------------------------------------------------------------------------------------- |
|
||
| klasNaam | string | Opsionele naam vir bykomende styl |
|
||
| toetsId | string | Toets identifiseerder vir die knoppie. |
|
||
| Ikoon | `Reageer.ComponentType` | ‘n Opsionele ikoon komponent wat binne die knoppie vertoon word. |
|
||
| titel | string | Die teksinhoud van die knoppie. |
|
||
| grootte | string | Die grootte van die knoppie. Het twee opsies: `klein` en `medium` |
|
||
| aksent | string | Die aksentkleur van die knoppie. Opsies sluit in: `sekondêr` en `tersiêr` |
|
||
| aktief | booleaanse | Bepaal of die knoppie in 'n aktiewe toestand is. |
|
||
| gedeaktiveer | booleaanse | Bepaal of die knoppie gedeaktiveer is. |
|
||
| fokus | booleaanse | Dui aan of die knoppie fokus het. |
|
||
| onClick | funksie | ‘n Terugroepfunksie wat geaktiveer word wanneer die gebruiker op die knoppie klik. |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Hoofknoppie
|
||
|
||
<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">
|
||
|
||
| Eienskappe | Tipe | Beskrywing |
|
||
| -------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------- |
|
||
| titel | string | Die teksinhoud van die knoppie. |
|
||
| volleBreedte | booleaanse | Bepaal of die knoppie oor die hele breedte van sy houer behoort te strek. |
|
||
| variant | string | Die visuele stylvariant van die knoppie. Opsies sluit in `primêr` en `sekondêr` |
|
||
| binnekort | booleaanse | Dui aan of die knoppie gemerk is as "binnekort" (soos vir komende funksies). |
|
||
| Ikoon | `Reageer.ComponentType` | ‘n Opsionele ikoon komponent wat binne die knoppie vertoon word. |
|
||
| React `button` props | `React.ComponentProps<'button'>` | Alle standaard HTML-knoppie-elektra word ondersteun. |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|
||
|
||
## Ronde Ikoon Knoppie
|
||
|
||
<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">
|
||
|
||
| Eienskappe | Tipe | Beskrywing |
|
||
| -------------------- | ----------------------------------------------- | ---------- |
|
||
| Ikoon | `Reageer.ComponentType` | |
|
||
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
||
|
||
</Tab>
|
||
|
||
</Tabs>
|