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
19 KiB
Plaintext
489 lines
19 KiB
Plaintext
---
|
|
title: Napit
|
|
image: /images/user-guide/views/filter.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
|
</Frame>
|
|
|
|
A list of buttons and button groups used throughout the app.
|
|
|
|
## Nappi
|
|
|
|
<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">
|
|
|
|
| Ominaisuudet | Tyyppi | Kuvaus |
|
|
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
| className | merkkijono | Valinnainen luokan nimi lisämuotoilua varten |
|
|
| Kuvake | `React.ComponentType` | Valinnainen kuvakekomponentti, joka näkyy painikkeessa |
|
|
| otsikko | string | Painikkeen tekstisisältö |
|
|
| kokoLeveys | looginen | Määrittää, venyykö painike koko säiliönsä leveydelle |
|
|
| variantti | merkkijono | Painikkeen visuaalinen tyyli. Vaihtoehdot: `primary`, `secondary` ja `tertiary` |
|
|
| koko | merkkijono | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen` |
|
|
| asema | string | Napin sijainti suhteessa sisaruksiinsa. Vaihtoehdot: `standalone`, `left`, `right` ja `middle` |
|
|
| korostus | merkkijono | Painikkeen korostusväri. Options include: `default`, `blue`, and `danger` |
|
|
| pian | looginen | Ilmaisee, onko painike merkitty "tulossa pian" (esim. tulevia ominaisuuksia varten) |
|
|
| pois käytöstä | looginen | Määrittää, onko nappi pois käytöstä |
|
|
| keskittyminen | boolean | Määrittää, onko napilla fokus |
|
|
| onClick | toiminto | Takaisinkutsu, joka aktivoituu, kun käyttäjä klikkaa painiketta |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Nappiryhmä
|
|
|
|
<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">
|
|
|
|
| Rekvisiitat | Tyyppi | Kuvaus |
|
|
| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | merkkijono | Valinnainen nimi lisätyyliksi |
|
|
| Kuvake | `React.ComponentType` | Valinnainen kuvakekomponentti, joka näkyy painikkeessa |
|
|
| otsikko | string | Painikkeen tekstisisältö |
|
|
| koko | merkkijono | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen` |
|
|
| asema | merkkijono | Napin sijainti suhteessa sisaruksiinsa. Vaihtoehdot: `standalone`, `left`, `middle`, `right` |
|
|
| applyShadow | looginen | Määrittää, käytetäänkö napin varjostusta |
|
|
| applyBlur | boolean | Määrittää, käytetäänkö napin sumentamista |
|
|
| pois käytöstä | looginen | Määrittää, onko painike poissa käytöstä |
|
|
| keskittyminen | looginen | Ilmaisee, onko painike keskipisteenä |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Kelluva nappiryhmä
|
|
|
|
<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">
|
|
|
|
| Ominaisuudet | Tyyppi | Kuvaus | Oletus |
|
|
| ------------ | ---------- | ---------------------------------------------------------------------------------------------- | ------ |
|
|
| koko | merkkijono | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen` | pieni |
|
|
| children | ReactNode | React-elementtien joukko, joka edustaa yksittäisiä nappeja ryhmässä | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Kelluva kuvakenappi
|
|
|
|
<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">
|
|
|
|
| Ominaisuudet | Tyyppi | Kuvaus |
|
|
| ------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
| luokanNimi | merkkijono | Valinnainen nimi lisätyyliksi |
|
|
| Kuvake | `React.ComponentType` | Valinnainen kuvakekomponentti, joka näkyy painikkeessa |
|
|
| koko | merkkijono | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen` |
|
|
| asema | string | Napin sijainti suhteessa sisaruksiinsa. Vaihtoehdot: `standalone`, `left`, `right` ja `middle` |
|
|
| applyShadow | boolean | Määrittää, käytetäänkö napin varjostusta |
|
|
| applyBlur | looginen | Määrittää, käytetäänkö napin sumentamista |
|
|
| pois käytöstä | looginen | Määrittää, onko painike poissa käytöstä |
|
|
| keskittyminen | boolean | Ilmaisee, onko painike keskipisteenä |
|
|
| onClick | toiminto | Takaisinkutsu, joka aktivoituu, kun käyttäjä klikkaa painiketta |
|
|
| aktiivinen | looginen | Määrittää, onko painike aktiivisena |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Kelluva kuvakenappiryhmä
|
|
|
|
<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">
|
|
|
|
| Rekvisiitat | Tyyppi | Kuvaus |
|
|
| ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| luokanNimi | string | Valinnainen nimi lisätyyliksi |
|
|
| koko | string | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen` |
|
|
| kuvakeNapit | taulukko | 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>
|
|
|
|
## Kevyt nappi
|
|
|
|
<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">
|
|
|
|
| Rekvisiitat | Tyyppi | Kuvaus |
|
|
| ------------- | ----------------- | ---------------------------------------------------------------------------------------------------- |
|
|
| luokanNimi | merkkijono | Valinnainen nimi lisätyyliksi |
|
|
| kuvake | `React.ReactNode` | Kuvake, jonka haluat näyttää napissa |
|
|
| otsikko | string | Painikkeen tekstisisältö |
|
|
| korostus | merkkijono | Painikkeen korostusväri. Options include: `secondary` and `tertiary` |
|
|
| aktiivinen | looginen | Määrittää, onko painike aktiivisena |
|
|
| pois käytöstä | looginen | Määrittää, onko painike poissa käytöstä |
|
|
| keskittyminen | looginen | Ilmaisee, onko painike keskipisteenä |
|
|
| onClick | toiminto | Takaisinkutsu, joka aktivoituu, kun käyttäjä klikkaa painiketta |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Kevyt kuvakepainike
|
|
|
|
<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">
|
|
|
|
| Ominaisuudet | Tyyppi | Kuvaus |
|
|
| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
| className | merkkijono | Valinnainen nimi lisätyyliksi |
|
|
| testiId | string | Painikkeen testitunniste |
|
|
| Kuvake | `React.ComponentType` | Valinnainen kuvakekomponentti, joka näkyy painikkeessa |
|
|
| otsikko | string | Painikkeen tekstisisältö |
|
|
| koko | merkkijono | Painikkeen koko. Kaksi vaihtoehtoa: `pieni` ja `keskikokoinen` |
|
|
| korostus | string | Painikkeen korostusväri. Options include: `secondary` and `tertiary` |
|
|
| aktiivinen | boolean | Määrittää, onko painike aktiivisena |
|
|
| pois käytöstä | boolean | Määrittää, onko painike poissa käytöstä |
|
|
| keskittyminen | boolean | Ilmaisee, onko painike keskipisteenä |
|
|
| onClick | funktio | Takaisinkutsu, joka aktivoituu, kun käyttäjä klikkaa painiketta |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Pääpainike
|
|
|
|
<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">
|
|
|
|
| Ominaisuudet | Tyyppi | Kuvaus |
|
|
| -------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
|
|
| otsikko | string | Painikkeen tekstisisältö |
|
|
| kokoLeveys | boolean | Määrittää, venyykö painike koko säiliönsä leveydelle |
|
|
| variantti | merkkijono | Painikkeen visuaalinen tyyli. Options include `primary` and `secondary` |
|
|
| pian | looginen | Ilmaisee, onko painike merkitty "tulossa pian" (esim. tulevia ominaisuuksia varten) |
|
|
| Kuvake | `React.ComponentType` | Valinnainen kuvakekomponentti, joka näkyy painikkeessa |
|
|
| React `button` props | `React.ComponentProps<'button'>` | Kaikki standardit HTML-painikkeen ominaisuudet ovat tuettuja |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Pyöristetyllä kuvakkeella varustettu painike
|
|
|
|
<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">
|
|
|
|
| Ominaisuudet | Tyyppi | Kuvaus |
|
|
| -------------------- | ----------------------------------------------- | ------ |
|
|
| Kuvake | `React.ComponentType` | |
|
|
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|