github-actions[bot]
cd73088be6
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
523 lines
23 KiB
Plaintext
523 lines
23 KiB
Plaintext
---
|
|
title: Кнопки
|
|
icon: hand-pointer
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/views/filter.png" alt="Заголовок" />
|
|
</Frame>
|
|
|
|
Список кнопок и групп кнопок, использованных в приложении.
|
|
|
|
## Кнопка
|
|
|
|
<Tabs>
|
|
|
|
<Tab title="Использование">
|
|
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание |
|
|
| ------------ | --------------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
| className | строка | Дополнительное имя класса для дополнительной стилизации |
|
|
| Иконка | `React.ComponentType` | Необязательный компонент иконки, отображаемый на кнопке |
|
|
| заголовок | строка | Текстовое содержимое кнопки |
|
|
| полнаяШирина | логическое | Определяет, должна ли кнопка занимать всю ширину контейнера |
|
|
| вариант | строка | Визуальный стиль кнопки. Включает опции `primary`, `secondary` и `tertiary` |
|
|
| размер | строка | Размер кнопки. Есть два варианта: `small` и `medium` |
|
|
| позиция | строка | Положение кнопки по отношению к соседним элементам. Опции включают: `standalone`, `left`, `right` и `middle` |
|
|
| акцент | строка | Акцентный цвет кнопки. Включает опции: `default`, `blue`, и `danger` |
|
|
| скоро | булево | Указывает, отмечена ли кнопка как «скоро» (например, для предстоящих функций) |
|
|
| отключено | булево | Определяет, отключена кнопка или нет |
|
|
| фокус | булево | Определяет, имеет ли кнопка фокус |
|
|
| onClick | функция | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Группа кнопок
|
|
|
|
<Tabs>
|
|
<Tab title="Использование">
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание |
|
|
| --------- | --------- | -------------------------------------------------------------------------------------------------- |
|
|
| вариант | строка | Визуальный вариант оформления кнопок в группе. Включает опции `primary`, `secondary`, и `tertiary` |
|
|
| размер | строка | Размер кнопок в группе. Имеет два варианта: `medium` и `small` |
|
|
| акцент | строка | Акцентный цвет кнопок в группе. Включает опции `default`, `blue` и `danger` |
|
|
| className | строка | Дополнительное имя класса для дополнительной стилизации |
|
|
| children | ReactNode | Массив элементов React, представляющих отдельные кнопки в группе |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Плавающая кнопка
|
|
|
|
<Tabs>
|
|
<Tab title="Использование">
|
|
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание |
|
|
| ------------------ | --------------------- | ----------------------------------------------------------------------------------------------------------- |
|
|
| className | строка | Необязательное имя для дополнительной стилизации |
|
|
| Иконка | `React.ComponentType` | Необязательный компонент иконки, отображаемый на кнопке |
|
|
| заголовок | строка | Текстовое содержимое кнопки |
|
|
| размер | строка | Размер кнопки. Есть два варианта: `small` и `medium` |
|
|
| позиция | строка | Положение кнопки по отношению к соседним элементам. Опции включают: `standalone`, `left`, `middle`, `right` |
|
|
| применить тень | булево | Определяет, применять ли тень к кнопке |
|
|
| применить размытие | булево | Определяет, применять ли размытие к кнопке |
|
|
| отключено | булево | Определяет, отключена ли кнопка |
|
|
| фокус | булево | Указывает, имеет ли кнопка фокус |
|
|
|
|
|
|
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Группа плавающих кнопок
|
|
|
|
<Tabs>
|
|
<Tab title="Использование">
|
|
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание | По умолчанию |
|
|
| -------- | --------- | ---------------------------------------------------------------- | ------------ |
|
|
| размер | строка | Размер кнопки. Есть два варианта: `small` и `medium` | маленький |
|
|
| children | ReactNode | Массив элементов React, представляющих отдельные кнопки в группе | |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Плавающая кнопка с иконкой
|
|
|
|
<Tabs>
|
|
<Tab title="Использование">
|
|
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание |
|
|
| ------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------ |
|
|
| className | строка | Необязательное имя для дополнительной стилизации |
|
|
| Иконка | `React.ComponentType` | Необязательный компонент иконки, отображаемый на кнопке |
|
|
| размер | строка | Размер кнопки. Есть два варианта: `small` и `medium` |
|
|
| позиция | строка | Положение кнопки по отношению к соседним элементам. Опции включают: `standalone`, `left`, `right` и `middle` |
|
|
| применить тень | булево | Определяет, применять ли тень к кнопке |
|
|
| применить размытие | булево | Определяет, применять ли размытие к кнопке |
|
|
| отключено | булево | Определяет, отключена ли кнопка |
|
|
| фокус | булево | Указывает, имеет ли кнопка фокус |
|
|
| onClick | функция | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
|
|
| активен | булево | Определяет, находится ли кнопка в активном состоянии |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Группа плавающих кнопок с иконками
|
|
|
|
<Tabs>
|
|
<Tab title="Использование">
|
|
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание |
|
|
| ----------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | строка | Необязательное имя для дополнительной стилизации |
|
|
| размер | строка | Размер кнопки. Есть два варианта: `small` и `medium` |
|
|
| кнопки с иконками | массив | Массив объектов, каждый из которых представляет собой кнопку с иконкой в группе. Каждый объект должен включать компонент иконки, который вы хотите отобразить на кнопке, функцию, которую вы хотите вызвать при нажатии на кнопку, и информацию о том, должна ли кнопка быть активной или нет. |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Легкая кнопка
|
|
|
|
<Tabs>
|
|
<Tab title="Использование">
|
|
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание |
|
|
| --------- | ----------------- | --------------------------------------------------------------------------------- |
|
|
| className | строка | Необязательное имя для дополнительной стилизации |
|
|
| иконка | `React.ReactNode` | Иконка, которую вы хотите отобразить на кнопке |
|
|
| заголовок | строка | Текстовое содержимое кнопки |
|
|
| акцент | строка | Акцентный цвет кнопки. Опции включают: `secondary` и `tertiary` |
|
|
| активный | булево | Определяет, находится ли кнопка в активном состоянии |
|
|
| отключено | булево | Определяет, отключена ли кнопка |
|
|
| фокус | булево | Указывает, имеет ли кнопка фокус |
|
|
| onClick | функция | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Легкая кнопка с иконкой
|
|
|
|
<Tabs>
|
|
<Tab title="Использование">
|
|
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание |
|
|
| ------------------- | --------------------- | --------------------------------------------------------------------------------- |
|
|
| className | строка | Необязательное имя для дополнительной стилизации |
|
|
| идентификатор теста | строка | Идентификатор теста для кнопки |
|
|
| Иконка | `React.ComponentType` | Необязательный компонент иконки, отображаемый на кнопке |
|
|
| заголовок | строка | Текстовое содержимое кнопки |
|
|
| размер | строка | Размер кнопки. Есть два варианта: `small` и `medium` |
|
|
| акцент | строка | Акцентный цвет кнопки. Опции включают: `secondary` и `tertiary` |
|
|
| активный | булево | Определяет, находится ли кнопка в активном состоянии |
|
|
| отключено | булево | Определяет, отключена ли кнопка |
|
|
| фокус | булево | Указывает, имеет ли кнопка фокус |
|
|
| onClick | функция | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Главная кнопка
|
|
|
|
<Tabs>
|
|
<Tab title="Использование">
|
|
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание |
|
|
| -------------------- | -------------------------------- | ----------------------------------------------------------------------------- |
|
|
| заголовок | строка | Текстовое содержимое кнопки |
|
|
| полнаяШирина | булево | Определяет, должна ли кнопка занимать всю ширину контейнера |
|
|
| вариант | строка | Визуальный стиль кнопки. Опции включают `primary` и `secondary` |
|
|
| скоро | булево | Указывает, отмечена ли кнопка как «скоро» (например, для предстоящих функций) |
|
|
| Иконка | `React.ComponentType` | Необязательный компонент иконки, отображаемый на кнопке |
|
|
| React `button` props | `React.ComponentProps<'button'>` | Все стандартные свойства кнопки HTML поддерживаются |
|
|
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Круглая кнопка с иконкой
|
|
|
|
<Tabs>
|
|
<Tab title="Использование">
|
|
|
|
```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="Свойства">
|
|
|
|
|
|
| Свойства | Тип | Описание |
|
|
| -------------------- | ----------------------------------------------- | -------- |
|
|
| Иконка | `React.ComponentType` | |
|
|
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` | |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|