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
22 KiB
Plaintext
489 lines
22 KiB
Plaintext
---
|
|
title: Кнопки
|
|
image: /images/user-guide/views/filter.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Список кнопок та груп кнопок, що використовуються у додатку.
|
|
|
|
## Кнопка
|
|
|
|
<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">
|
|
|
|
| Властивості | Тип | Опис |
|
|
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | рядок | Необов'язкова назва класу для додаткового стилювання |
|
|
| Іконка | `React.ComponentType` | Необов'язковий компонент іконки, який відображається всередині кнопки. |
|
|
| заголовок | рядок | Текстовий вміст кнопки. |
|
|
| fullWidth | булевий тип | Визначає, чи повинна кнопка охоплювати всю ширину свого контейнера. |
|
|
| variant | рядок | Візуальний стильовий варіант кнопки. Опції включають `primary`, `secondary` та `tertiary`. |
|
|
| розмір | рядок | Розмір кнопки. Має два варіанти: `малий` і `середній` |
|
|
| позиція | рядок | Положення кнопки щодо її сусідів. Опції включають: `standalone`, `left`, `right`, i `middle`. |
|
|
| accent | рядок | Акцентний колір кнопки. Опції включають: `default`, `blue` та `danger`. |
|
|
| скоро | булевий тип | Вказує, чи кнопка позначена як "незабаром" (як для майбутніх функцій). |
|
|
| відключено | булевий тип | Визначає, чи кнопка відключена чи ні. |
|
|
| focus | булевий тип | Визначає, чи кнопка у фокусі. |
|
|
| onClick | функція | Функція зворотного виклику, що спрацьовує при натисканні на кнопку користувачем. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Група кнопок
|
|
|
|
<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">
|
|
|
|
| Властивості | Тип | Опис |
|
|
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | рядок | Необов'язкове ім'я для додаткового стилювання |
|
|
| Іконка | `React.ComponentType` | Необов'язковий компонент іконки, який відображається всередині кнопки. |
|
|
| заголовок | рядок | Текстовий вміст кнопки. |
|
|
| розмір | рядок | Розмір кнопки. Має два варіанти: `малий` і `середній` |
|
|
| позиція | рядок | Положення кнопки щодо її сусідів. Опції включають: `standalone`, `left`, `middle`, `right`. |
|
|
| applyShadow | булевий тип | Визначає, чи потрібно застосовувати тінь до кнопки. |
|
|
| applyBlur | булевий тип | Визначає, чи потрібно застосовувати ефект розмиття до кнопки. |
|
|
| відключено | булевий тип | Визначає, чи кнопка відключена. |
|
|
| focus | булевий тип | Вказує, чи кнопка у фокусі. |
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Група плаваючих кнопок
|
|
|
|
<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">
|
|
|
|
| Властивості | Тип | Опис | За замовчуванням |
|
|
| ----------- | --------- | ------------------------------------------------------------------------------------- | ---------------- |
|
|
| розмір | рядок | Розмір кнопки. Має два варіанти: `малий` і `середній` | small |
|
|
| children | ReactNode | Масив елементів React, які представляють окремі кнопки у межах групи. | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Плаваюча кнопка з іконкою
|
|
|
|
<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">
|
|
|
|
| Властивості | Тип | Опис |
|
|
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | рядок | Необов'язкове ім'я для додаткового стилювання |
|
|
| Іконка | `React.ComponentType` | Необов'язковий компонент іконки, який відображається всередині кнопки. |
|
|
| розмір | рядок | Розмір кнопки. Має два варіанти: `малий` і `середній` |
|
|
| позиція | рядок | Положення кнопки щодо її сусідів. Опції включають: `standalone`, `left`, `right`, i `middle`. |
|
|
| applyShadow | булевий тип | Визначає, чи потрібно застосовувати тінь до кнопки. |
|
|
| applyBlur | булевий тип | Визначає, чи потрібно застосовувати ефект розмиття до кнопки. |
|
|
| відключено | булевий тип | Визначає, чи кнопка відключена. |
|
|
| focus | булевий тип | Вказує, чи кнопка у фокусі. |
|
|
| onClick | функція | Функція зворотного виклику, що спрацьовує при натисканні на кнопку користувачем. |
|
|
| isActive | булевий тип | Визначає, чи кнопка у активному стані. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Група плаваючих кнопок з іконками
|
|
|
|
<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">
|
|
|
|
| Властивості | Тип | Опис |
|
|
| ----------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | рядок | Необов'язкове ім'я для додаткового стилювання |
|
|
| розмір | рядок | Розмір кнопки. Має два варіанти: `малий` і `середній` |
|
|
| iconButtons | масив | Масив об'єктів, кожен з яких представляє кнопку з іконкою в групі. Кожен об'єкт повинен містити компонент іконки, який ви хочете відобразити в кнопці, функцію, яку ви хочете викликати при натисканні користувача на кнопку, і вказати, чи повинна кнопка бути активною. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Легка кнопка
|
|
|
|
<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">
|
|
|
|
| Властивості | Тип | Опис |
|
|
| ----------- | ----------------- | --------------------------------------------------------------------------------------------------- |
|
|
| className | рядок | Необов'язкове ім'я для додаткового стилювання |
|
|
| іконка | `React.ReactNode` | Іконка, яку ви хочете відобразити в кнопці. |
|
|
| заголовок | рядок | Текстовий вміст кнопки. |
|
|
| accent | рядок | Акцентний колір кнопки. Options include: `secondary` and `tertiary` |
|
|
| активний | булевий тип | Визначає, чи кнопка у активному стані. |
|
|
| відключено | булевий тип | Визначає, чи кнопка відключена. |
|
|
| focus | булевий тип | Вказує, чи кнопка у фокусі. |
|
|
| onClick | функція | Функція зворотного виклику, що спрацьовує при натисканні на кнопку користувачем. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Легка кнопка з іконкою
|
|
|
|
<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">
|
|
|
|
| Властивості | Тип | Опис |
|
|
| ----------- | --------------------- | --------------------------------------------------------------------------------------------------- |
|
|
| className | рядок | Необов'язкове ім'я для додаткового стилювання |
|
|
| testId | рядок | Тестовий ідентифікатор для кнопки. |
|
|
| Іконка | `React.ComponentType` | Необов'язковий компонент іконки, який відображається всередині кнопки. |
|
|
| заголовок | рядок | Текстовий вміст кнопки. |
|
|
| розмір | рядок | Розмір кнопки. Має два варіанти: `малий` і `середній` |
|
|
| accent | рядок | Акцентний колір кнопки. Options include: `secondary` and `tertiary` |
|
|
| активний | булевий тип | Визначає, чи кнопка у активному стані. |
|
|
| відключено | булевий тип | Визначає, чи кнопка відключена. |
|
|
| focus | булевий тип | Вказує, чи кнопка у фокусі. |
|
|
| onClick | функція | Функція зворотного виклику, що спрацьовує при натисканні на кнопку користувачем. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Головна кнопка
|
|
|
|
<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">
|
|
|
|
| Властивості | Тип | Опис |
|
|
| -------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------- |
|
|
| заголовок | рядок | Текстовий вміст кнопки. |
|
|
| fullWidth | булевий тип | Визначає, чи повинна кнопка охоплювати всю ширину свого контейнера. |
|
|
| variant | рядок | Візуальний стильовий варіант кнопки. Options include `primary` and `secondary` |
|
|
| скоро | булевий тип | Вказує, чи кнопка позначена як "незабаром" (як для майбутніх функцій). |
|
|
| Іконка | `React.ComponentType` | Необов'язковий компонент іконки, який відображається всередині кнопки. |
|
|
| React `button` props | `React.ComponentProps<'button'>` | Підтримуються всі стандартні властивості кнопок HTML. |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Округлена кнопка з іконкою
|
|
|
|
<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">
|
|
|
|
| Властивості | Тип | Опис |
|
|
| -------------------- | ----------------------------------------------- | ---- |
|
|
| Іконка | `React.ComponentType` | |
|
|
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|