Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@n3/kit

web906MIT0.31.1TypeScript support: included

React components for n3 interfaces

react, reactjs, components, toolkit

readme

Alert

Компонент уведомления.

import {
  Alert,
  alertTypes,
} from '@n3/kit/Alert';

Props

Название Обязательность Тип Значение по умолчанию Описание
type + enum
- alertTypes.INFO
- alertTypes.WARNING
- alertTypes.DANGER
- alertTypes.SUCCESS
| Тип сообщения
title | node null Заголовок сообщения
button | node null Кнопка действий у сообщения
noMargins | bool false Если true, сообщение ренедерится без отступов сверху и снизу
children | node null

AsyncCreatable

Стилизованный react-select/creatable + react-select-async-paginate.

import { AsyncCreatable } from '@n3/kit/AsyncCreatable';

Props

Название Обязательность Тип Значение по умолчанию Описание
allowCreateWhileLoading | boolean |
formatCreateLabel | (inputValue: string) => ReactNode |
isValidNewOption | (inputValue: string, value: any, options: OptionsType<any>) => boolean |
getNewOptionData | (inputValue: string, optionLabel: ReactNode) => any |
onCreateOption | (inputValue: string) => void |
createOptionPosition | "first" "last" |
small | boolean false Маленькое ли поле
isMulti | boolean false Множественный выбор
isClearable | boolean true Возможность сброса значения
hasError | boolean false Есть ли у поля ошибка
hasWarning | boolean false Есть ли у поля предупреждение
value | any null Значение поля
selectRef | Ref<any> | ref для получения экземпляра react-select
renderModal | (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode undefined Функция рендера содержимого модального окна
isDisabled | boolean false Выключено ли поле
getOptionLabel | GetOptionLabel null Функция получения заголовка опции для вывода и фильтрации
labelKey | string "label" Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue | GetOptionValue null Функция получения значения опции
valueKey | string "value" Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange | (nextValue: any) => void "(): void => {}" Обработчик изменения значения поля
@param nextValue - новое значение поля
loadOptions | LoadOptions<any, any> | Асинхронная функция запроса данных с сервера в формате react-select-async-paginate
@param search - значение строки поиска
@param prevOptions - список загруженных опций
@param additional - дополнительные параметры запроса
@returns ответ сервера
additional | any | Дополнительные параметры первого запроса
debounceTimeout | number | Задержка при отправке запросов
cacheUniqs + any[] | Список значений при изменении одного из которых опции будут сброшены

Autocomplete

Автокомплит.

import { Autocomplete } from '@n3/kit/Autocomplete';

Props

Название Обязательность Тип Значение по умолчанию Описание
loadOptions + LoadOptions | Функция загрузки опций
@param search - текущее значение поля ввода
@returns response.options - опции
value + string | Значение элемента input
onChange | OnChange | Обработчик изменения значения поля при ручном вводе
onSelect | OnSelect | Обработчик изменения значения поля при выборе из меню
@param value - текст выбранной опции
@param option - выбранная опция
disabled | boolean false Выключено ли поле
hasError | boolean false Есть ли у поля ошибка
hasWarning | boolean false Есть ли у поля предупреждение
inputProps | HTMLProps<HTMLInputElement> "{}" Дополнительные props элемента input
labelKey | string "label" Ключ, по которому хранится текст опции
getOptionLabel | GetOptionLabel | Функция получения текста опции, который будет подставлен при выборе
formatOptionLabel | FormatOptionLabel | Функция отображения опции

AxiosErrorPage

Страницы ошибки, полученной с помощью axios.

import { AxiosErrorPage } from '@n3/kit/AxiosErrorPage';

Props

Название Обязательность Тип Значение по умолчанию Описание
error + AxiosError | Ошибка axios

Компонент хлебных крошек.

import { Breadcrumbs } from '@n3/kit/Breadcrumbs';

Props

Название Обязательность Тип Значение по умолчанию Описание
breadcrumbs + arrayOf [
shape {
- url
string
- title
string
}
]
| массив объектов хлебных крошек
homeLink | string undefined Ссылка на домашнюю страницу

Button

Компонент кнопки.

import {
  Button,
  buttonColors,
  ButtonIcon,
  buttonSizes,
} from '@n3/kit/Button';

Props

Button

Название Обязательность Тип Значение по умолчанию Описание
color | ButtonColor Цвет кнопки
size | ButtonSize Размер кнопки
component | elementType 'button' Компонент корневого элемента кнопки
componentProps | object {} Дополнительный props компонента кнопки при использовании кастомного component
loading | bool false Состояние загрузки
disabled | bool false Кнопка выключена
pressed | bool false Кнопка зажата
flatLeft | bool false Не отображать закругления слева
flatRight | bool false Не отображать закругления справа
onlyIcon | bool false Кнопка состоит только из иконки
className | string '' Дополнительный класс корневого компонента кнопки
onClick | func Function.prototype Обработчик нажатия на кнопку
children | node null

ButtonIcon

Компонент для выравнивания иконок относительно границ и текста кнопки.

<Button>
  Скачать
  <ButtonIcon
    isRight
  >
    <i className="fa fa-download" />
  </ButtonIcon>
</Button>
Название Обязательность Тип Значение по умолчанию Описание
isLeft | bool false Иконка находится слева от текста
isRight | bool false Иконка находится справа от текста

ButtonDropdown

Кнопка-дропдаун.

import { ButtonDropdown } from '@n3/kit/ButtonDropdown';

Props

Название Обязательность Тип Значение по умолчанию Описание
dropdown + DropdownBase | props компонента Dropdown
hasArrow | boolean false Показывать ли стрелку справа от текста
children | ReactNode null Содержимое кнопки
...rest | Object | props, которые будут переданы в кнопку

ButtonGroup

Группа кнопок.

import { ButtonGroup } from '@n3/kit/ButtonGroup';

Props

Название Обязательность Тип Значение по умолчанию Описание
borderCollapse | boolean false Должны ли соседние кнопки иметь общую границу
...rest | Object | props, которые будут переданы в каждую кнопку

Ссылка react-router-dom, стилизованная под кнопку.

import { ButtonLink } from '@n3/kit/ButtonLink';

Props

Название Обязательность Тип Значение по умолчанию Описание
icon - ReactNode undefined Иконка кнопки
onlyIcon - boolean undefined Отображать только иконку внутри кнопки
to + any | Параметр ссылки react-router-dom
target | string undefined Параметр ссылки react-router-dom
disabled | boolean false Выключена ли кнопка

ButtonModal

Кнопка, открывающая модальное окно.

import { ButtonModal } from '@n3/kit/ButtonModal';

Props

Название Обязательность Тип Значение по умолчанию Описание
renderModal + (renderProps: {
closeModal: () => void;
}) => ReactNode
| Функция рендера модального окна
modalSize | ModalSize | Размер модального окна
hasCloseButton | boolean | Отображается ли кнопка закрытия окна
isHideOnBackdropClick | boolean | Закрывать ли окно при нажатии вне окна
...rest | `Omit<ButtonProps, 'component' 'componentProps'>` | Свойства кнопки

ButtonToolbar

Тулбар кнопок.

import { ButtonToolbar } from '@n3/kit/ButtonToolbar';

Props

Название Обязательность Тип Значение по умолчанию Описание
align | enum
- 'left'
- 'right'
'left' Выравнивание кнопок внутри
indent | enum
- 'default'
- 'small'
'default' Расстояние между кнопками
children | node null

ButtonWithDropdown

Кнопка с выпадающим списком.

import { ButtonWithDropdown } from '@n3/kit/ButtonWithDropdown';

Props

Название Обязательность Тип Значение по умолчанию Описание
size | ButtonSize | Размер кнопки
component | ButtonComponent undefined Компонент корневого элемента кнопки
Компонент кнопки
componentProps | { [key: string]: any; } undefined Дополнительный props компонента кнопки при использовании кастомного component
Дополнительные props кнопки
loading | boolean false Состояние загрузки
Находится ли кнопка в состоянии загрузки
disabled | boolean false Кнопка выключена
Выключены ли кнопка и дропдаун
pressed | boolean | Кнопка зажата
flatLeft | boolean | Не отображать закругления слева
flatRight | boolean | Не отображать закругления справа
onlyIcon | boolean | Кнопка состоит только из иконки
className | string | Дополнительный класс корневого компонента кнопки
onClick | Function Function.prototype Обработчик нажатия на кнопку
Обработчик нажатия на кнопку
children | ReactNode null Текст кнопки
dropdown + DropdownBase | props компонента Dropdown
buttonDisabled | boolean false Выключена ли кнопка
color | ButtonColor buttonColors.DEFAULT Цвет
dropdownDisabled | boolean false Выключена ли кнопка открытия выпадающего списка

Cell

Ячейка внутри Row.

Props

Название Обязательность Тип Значение по умолчанию Описание
isPercenage | boolean false Пропорциональная ширина колонки относительно контейнера
xs | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 null Количество колонок в разрешениях до 576px
sm | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 null Количество колонок в разрешениях до 768px
md | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 null Количество колонок в разрешениях до 992px
lg | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 null Количество колонок в разрешениях до 1200px
xl | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 null Количество колонок в разрешениях от 1200px включительно

Checkbox

Чекбокс.

import { Checkbox } from '@n3/kit/Checkbox';

Props

Название Обязательность Тип Значение по умолчанию Описание
checked + boolean | выбран ли данный чекбокс
name | string "" name html-элемента input, а также аргумент колбэка onChange
value | ReactText "" value html-элемента input, а также аргумент колбэка onChange
disabled | boolean false выключен ли данный чекбокс
hasError | boolean false подсветка ошибки
hasWarning | boolean false подсветка предупреждения
indeterminate | boolean false находится ли данный чекбокс в неопределённом состоянии
helpText | ReactNode null текст/контент, всплывающий при наведении на чекбокс
tooltipProps | HintProps undefined Аргументы для тултипа
label | ReactNode null текст/контент, выводящийся рядом с чекбоксом
onChange | OnCheckboxChange "(): void => {}" хэндлер изменения значения, вызывается с параметрами: (nextChecked, value, name)

CheckboxGroup

Группа чекбоксов.

import { CheckboxGroup } from '@n3/kit/CheckboxGroup';

Props

Название Обязательность Тип Значение по умолчанию Описание
inline | boolean false инлайновый вывод чекбоксов
name | string "" name каждого html-элемента input
value + ReactText[] | массив значений выбранных опций
disabled | boolean false выключена ли данная группа чекбоксов
options + Record<string, any>[] | список опций данной группы чекбоксов
valueKey | string "value" ключ, по которому хранятся значения в объектах options
labelKey | string "label" ключ, по которому хранятся заголовки в объектах options
onChange | (nextValue: ReactText[]) => void "(): void => {}" хэндлер изменения значения

ClearButton

Кнопка очистки поля.

import { ClearButton } from '@n3/kit/ClearButton';

Props

Название Обязательность Тип Значение по умолчанию Описание
as | ComponentType 'span' Корневой компонент
...rest | ComponentProps<as> | Дополнительные props компонента as

Counter

Счётчик.

import { Counter } from '@n3/kit/Counter';

Props

Название Обязательность Тип Значение по умолчанию Описание
counter + number | Значение счётчика
maxNumber | number null Максимальное значение счётчика
isLight | bool false Отображение в светлых цветах

Creatable

Стилизованный react-select/creatable.

import { Creatable } from '@n3/kit/Creatable';

Props

Название Обязательность Тип Значение по умолчанию Описание
allowCreateWhileLoading | boolean |
formatCreateLabel | (inputValue: string) => ReactNode |
isValidNewOption | (inputValue: string, value: any, options: OptionsType<any>) => boolean |
getNewOptionData | (inputValue: string, optionLabel: ReactNode) => any |
onCreateOption | (inputValue: string) => void |
createOptionPosition | "first" "last" |
small | boolean false Маленькое ли поле
isMulti | boolean false Множественный выбор
isClearable | boolean true Возможность сброса значения
hasError | boolean false Есть ли у поля ошибка
hasWarning | boolean false Есть ли у поля предупреждение
value | any null Значение поля
selectRef | Ref<any> | ref для получения экземпляра react-select
renderModal | (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode undefined Функция рендера содержимого модального окна
isDisabled | boolean false Выключено ли поле
getOptionLabel | GetOptionLabel null Функция получения заголовка опции для вывода и фильтрации
labelKey | string "label" Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue | GetOptionValue null Функция получения значения опции
valueKey | string "value" Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange | (nextValue: any) => void "(): void => {}" Обработчик изменения значения поля
@param nextValue - новое значение поля
options + OptionsType<any> GroupedOptionsType<any> | Список опций

createDropdownMenu

Список опций выпадающего меню для приложений на базе @n3/kit.

import { createDropdownMenu } from '@n3/kit/createDropdownMenu';

Пример

import { ButtonDropdown } from '@n3/kit/ButtonDropdown';
import { createDropdownMenu } from '@n3/kit/createDropdownMenu';

// ...

<ButtonDropdown
  dropdown={createDropdownMenu([
    {
      render: ({
        className,
        children,
      }) => (
        <a
          className={className}
          href="http://netrika.ru/"
          target="_blank"
        >
          {children}
        </a>
      ),
      label: 'Ссылка на сайт Нетрики',
    },

    {
      onClick: () => {
        alert('Hello');
      },
      label: 'Алерт',
    },
  ])}
>
  Открыть меню
</ButtonDropdown>

Параметры пункта меню

Название Обязательность Тип Значение по умолчанию Описание
render | (renderProps: DropdownMenuItemRenderProps) => ReactNode defaultRender Функция рендера компонента
disabled | bool false Выключен ли данный элемент меню
className | string '' Дополнительный className
onClick | func null
renderIcon | func null Функция рендера иконки пункта меню
@param {Object} renderProps
@param {boolean} renderProps.disabled - выключен ли пункт меню
label + node | Текст пункта меню

CreateLayout

Лэйаут страницы создания.

import { CreateLayout } from '@n3/kit/CreateLayout';

Props

Название Обязательность Тип Значение по умолчанию Описание
breadcrumbs | Breadcrumb[] | Массив объектов хлебных крошек
title + node | Заголовок страницы
headerBlock | node null Блок, выводящийся между заголовком страницы и табами
children | node null Содержимое страницы

createRemoveTableAction

Действие удаления строки таблицы.

import { createRemoveTableAction } from '@n3/kit/createRemoveTableAction';
import { TableActions } from '@n3/kit/TableActions';

// ...

<TableActions
  actions={[
    createRemoveTableAction({}, {
      remove: () => new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 1500);
      }),
      approveTitle: 'Удаление ЕИСТ',
      approveContent: 'Восстановить проект будет невозможно.',
      approveButtonText: 'Удалить проект',
      cancelButtonText: 'Отменить',
      notification: {
        title: 'Успешно',
        content: 'Проект успешно удалён',
      },
    }),
  ]}
/>

Аргументы:

  1. Дополнительные параметры createDropdownMenu;
  2. Параметры useRemoveButton.

Datepicker

Поле ввода даты.

import { Datepicker } from '@n3/kit/Datepicker';

Props

Название Обязательность Тип Значение по умолчанию Описание
selected | Date | Выбранная дата
disabled | boolean false Выключено ли поле
small | boolean false Маленькое ли поле
hasError | boolean false Есть ли у поля ошибка
hasWarning | boolean false Есть ли у поля предупреждение
withTime | boolean false Есть ли возможность выбора времени
timeCaption | string "Время" Текст над вариантами выбора времени
block | boolean false Отображать ли поле во всю ширину
isClearable | boolean false Возможность сброса выбранной даты
autoComplete | "on" "off" "off" Включен ли нативный автокомплит в поле ввода дейтпикера
onChange | (nextDate: Date) => void "(): void => {}" Обработчик изменения или сброса значения
@param nextDate - новое значение

DebounceInput

Инпут с задержкой.

import { DebounceInput } from '@n3/kit/DebounceInput';

Props

Название Обязательность Тип Значение по умолчанию Описание
component | InputComponent | Компонент корневого элемента инпута
disabled | boolean | Выключено ли поле
hasError | boolean | Есть ли у поля ошибка
hasWarning | boolean | Есть ли у поля предупреждение
small | boolean | Маленькое ли поле
className | string | Дополнительный класс корневого компонента инпута
isOnlyBorderBottom | boolean | Отображение без рамки только с подчёркиванием снизу
buttons | RenderInputButton[] | Массив функций реднеда кнопок
@param props - все props инпута
@param index - индекс кнопки
debounceTimeout | number 300 Время задержки в мс

Компонент выпадающего меню.

import { Dropdown } from '@n3/kit/Dropdown';

Props

Название Обязательность Тип Значение по умолчанию Описание
hasHorizontalOffsets | bool true есть ли горизонтальный отступ между элементом и меню
hasVerticalOffsets | bool true есть ли вертикальный отступ между элементом и меню
renderContent + (renderProps: DropdownContentRenderProps) => ReactNode | функция рендера содержимого выпадающего меню
placement | string 'bottom-start' позиция меню в формате popper.js
popperStyle | object {} дополнительные стили popper-компонента
popperProps | objectOf {
any
}
{} дополнительные опции popper-компонента
modifiers | arrayOf [
object
]
[] modifiers popper-компонента
children + func | Функция рендера элемента, открывающего выпадающего меню
@param {Object} renderProps
@param {boolean} renderProps.isDropdownOpen - открыто ли меню
@param {Function} renderProps.onClick - обработчик нажатия на элемент, открывающий/закрывающий меню
@param {React ref} renderProps.ref - ref элемента, относительно которого позиционируется выпадающее меню

EditLayout

Лэйаут страницы редактирования.

import { EditLayout } from '@n3/kit/EditLayout';

Props

Название Обязательность Тип Значение по умолчанию Описание
breadcrumbs | Breadcrumb[] | Массив объектов хлебных крошек
title + node | Заголовок страницы
headerBlock | node null Блок, выводящийся между заголовком страницы и табами
children | node null Содержимое страницы

EllipsisDropdown

Выпадающий список в виде точек.

import { EllipsisDropdown } from '@n3/kit/EllipsisDropdown';

Props

Название Обязательность Тип Значение по умолчанию Описание
dropdown + shape {
- hasHorizontalOffsets
bool
- hasVerticalOffsets
bool
- renderContent
func
- placement
string
- popperStyle
object
- popperProps
objectOf {
any
}
- modifiers
arrayOf [
object
]
}
| props компонента Dropdown
className | string ''
disabled | bool false

ErrorPage

Страница ошибки.

import { ErrorPage } from '@n3/kit/ErrorPage';

Props

Название Обязательность Тип Значение по умолчанию Описание
status + number | http-статус
title | ReactNode null Заголовок страницы
description | ReactNode null Описание/руководство к действиям

Компонент, стилизованный, как ссылка.

import { FakeLink } from '@n3/kit/FakeLink';

Props

Название Обязательность Тип Значение по умолчанию Описание
component | React Component 'span'
disabled | boolean false Выключена ли обработка событий
onClick | Function null Обработчик нажатия, вызывается, если disabled не true

FieldGroup

Обёртка над полем для вывода заголовка, подсказки, ошибок и предупреждений.

import { FieldGroup } from '@n3/kit/FieldGroup';

Props

Название Обязательность Тип Значение по умолчанию Описание
colon | boolean true Если true`, после заголовка выводится двоеточие
direction | `'horizontal' 'vertical'` 'horizontal' Направление лейаута поля
onlyField | boolean false Если true, поле выводится без заголовка
label | string undefined Заголовок поля
required | boolean false Обязательность поля
isCellsPercentage | boolean false Пропорциональная ширина поля и контейнера для единиц измерения
isInput | boolean false Задать отступ заголовка, чтобы он был в одну линию с текстом поля ввода
isShow | boolean false Вывод в режиме просмотра (влияет на расстояние между полями)
hasRepeatOffsets | boolean false Вывод внутри Repeat.Block
hint | ReactNode undefined Подсказка, выводящаяся в тултипе рядом с заголовком
unit | ReactNode undefined Единицы измерения, выводится справа от поля
help | string[] undefined Подсказки поля
errors | string[] undefined Ошибки поля
warnings | string[] undefined Предупреждения поля
showBackground | boolean undefined Менять ли фон поля в случае ошибки или предупреждения
labelColsXs | CellValue 3 Количество колонок заголовка
fieldColsXs | CellValue 5 Количество колонок контента
unitColsXs | CellValue 1 Количество колонок единиц измерения
children | ReactNode undefined Контент поля

FieldWrapper

Обёртка над полем для вывода подсказки, ошибок и предупреждений.

import { FieldWrapper } from '@n3/kit/FieldWrapper';

Props

Название Обязательность Тип Значение по умолчанию Описание
help | string[] null Подсказки поля
errors | string[] null Ошибки поля
warnings | string[] null Предупреждения поля
showBackground | boolean false Менять ли фон в случае ошибки или предупреждения
children | ReactNode null Поле

FilterSelect

Стилизованный react-select.

import { FilterSelect } from '@n3/kit/FilterSelect';

Props

Название Обязательность Тип Значение по умолчанию Описание
small | boolean false Маленькое ли поле
isMulti | boolean false Множественный выбор
isClearable | boolean true Возможность сброса значения
hasError | boolean false Есть ли у поля ошибка
hasWarning | boolean false Есть ли у поля предупреждение
value | any null Значение поля
selectRef | Ref<any> | ref для получения экземпляра react-select
modalComponent | ComponentType<ModalSelectButtonModalProps> | Компонент модального окна
@prop {Function} onSelect - функция выбора значения
@prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps | { [key: string]: any; } | Дополнительные props компонента модального окна
isDisabled | boolean false Выключено ли поле
getOptionLabel | GetOptionLabel null Функция получения заголовка опции для вывода и фильтрации
labelKey | string "label" Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue | GetOptionValue null Функция получения значения опции
valueKey | string "value" Ключ, для получения значения опции в случае, если не определено getOptionValue
Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange | ((nextValue: any) => void) ((nextValue: any) => void) "(): void => {}" Обработчик изменения значения поля
Обработчик изменения значения поля
@param nextValue - новое значение поля
mainPlaceholder | string "Выберите..." Плейсхолдер компонента, который всегда отображается
options + OptionsType<any> GroupedOptionsType<any> | Список опций

FilterSelectAjax

Стилизованный react-select-fetch.

import { FilterSelectAjax } from '@n3/kit/FilterSelectAjax';

Props

Название Обязательность Тип Значение по умолчанию Описание
small | boolean false Маленькое ли поле
isMulti | boolean false Множественный выбор
isClearable | boolean true Возможность сброса значения
hasError | boolean false Есть ли у поля ошибка
hasWarning | boolean false Есть ли у поля предупреждение
value | any null Значение поля
selectRef | Ref<any> | ref для получения экземпляра react-select
modalComponent | ComponentType<ModalSelectButtonModalProps> | Компонент модального окна
@prop {Function} onSelect - функция выбора значения
@prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps | { [key: string]: any; } | Дополнительные props компонента модального окна
isDisabled | boolean false Выключено ли поле
getOptionLabel | GetOptionLabel null Функция получения заголовка опции для вывода и фильтрации
labelKey | string "label" Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue | GetOptionValue null Функция получения значения опции
valueKey | string "value" Ключ, для получения значения опции в случае, если не определено getOptionValue
Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange | ((nextValue: any) => void) ((nextValue: any) => void) "(): void => { }" Обработчик изменения значения поля
Обработчик изменения значения поля
@param nextValue - новое значение поля
url + string | апи-url для запроса данных
queryParams | { [key: string]: any; } | Перманентные параметры запроса
searchParamName | string | Ключ, по которому текст строки поиска будет добавлен к параметрам запроса
pageParamName | string | Ключ, по которому номер текущей страницы будет добавлен к параметрам запроса
offsetParamName | string | Ключ, по которому индекс первой опции для запроса будет добавлен к параметрам запроса
mapResponse | MapResponse<any> | Функция маппинга ответа сервера в формат react-select-async-paginate
get | Get | Асинхронная функция запроса данных с сервера
@param url - апи-url
@param queryParams - параметры запроса
@returns ответ сервера
debounceTimeout | number | Задержка при отправке запросов
cacheUniqs + any[] | Список значений при изменении одного из которых опции будут сброшены
mainPlaceholder | string "Выберите..." Плейсхолдер компонента, который всегда отображается

FilterSelectAsync

Стилизованный react-select-async-paginate.

import { FilterSelectAsync } from '@n3/kit/FilterSelectAsync';

Props

Название Обязательность Тип Значение по умолчанию Описание
small | boolean false Маленькое ли поле
isMulti | boolean false Множественный выбор
isClearable | boolean true Возможность сброса значения
hasError | boolean false Есть ли у поля ошибка
hasWarning | boolean false Есть ли у поля предупреждение
value | any null Значение поля
selectRef | Ref<any> | ref для получения экземпляра react-select
modalComponent | ComponentType<ModalSelectButtonModalProps> | Компонент модального окна
@prop {Function} onSelect - функция выбора значения
@prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps | { [key: string]: any; } | Дополнительные props компонента модального окна
isDisabled | boolean false Выключено ли поле
getOptionLabel | GetOptionLabel null Функция получения заголовка опции для вывода и фильтрации
labelKey | string "label" Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue | GetOptionValue null Функция получения значения опции
valueKey | string "value" Ключ, для получения значения опции в случае, если не определено getOptionValue
Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange | ((nextValue: any) => void) ((nextValue: any) => void) "(): void => {}" Обработчик изменения значения поля
Обработчик изменения значения поля
@param nextValue - новое значение поля
loadOptions | LoadOptions<any, any> | Асинхронная функция запроса данных с сервера в формате react-select-async-paginate
@param search - значение строки поиска
@param prevOptions - список загруженных опций
@param additional - дополнительные параметры запроса
@returns ответ сервера
additional | any | Дополнительные параметры первого запроса
debounceTimeout | number | Задержка при отправке запросов
cacheUniqs + any[] | Список значений при изменении одного из которых опции будут сброшены
mainPlaceholder | string "Выберите..." Плейсхолдер компонента, который всегда отображается

Grid

Контейнер содержимого.

import { Grid } from '@n3/kit/Grid';

Props

Название Обязательность Тип Значение по умолчанию Описание
centered | boolean false Добавить ли margin слева и справа
isFixedWidth | boolean false Не давать контенту сужаться

Шапка страницы.

import { Header } from '@n3/kit/Header';

Props

Название Обязательность Тип Значение по умолчанию Описание
logo + HeaderLogoParams | Логотип в левой части
isUserBlockHidden | boolean false Скрыть ли блок текущего пользователя (аватар + имя + дропдаун с действиями)
showAvatar | boolean | Отображать ли аватар текущего пользователя
avatar | string | Аватар текщего пользователя (отобразится плейсхолдер в случае, если аватар не задан)
userName | ReactNode | Имя текщего пользователя
dropdownOptions | HeaderDropdownOption[] | Опции выпадающего меню
leftBlock | ReactNode undefined Блок слева
menu | HeaderMenuItem[] | Левое меню
rightMenu | HeaderMenuItem[] | Правое меню
withPusher | boolean false Добавить ли dom-элемент для отступа сверху страницы, равного высоте шапки
counters | { [key: string]: number; } | Счётчики
countersMaxNumber | number | Максимальное число в счётчиках
collapsible | boolean | Отображение иконки раскрытия бокового меню на меленьких разрешениях
openMenu | () => void | Функция раскрытия бокового меню
isLogoCollapsible | boolean false Схлопывать ли логотип при схлопывании меню
menuCollapsed | boolean false Схлопнуто ли меню в иконки

HeaderLeftBlock

Компонент, задающий контент шапки. Должен быть использован внутри компонента Layout.

import { HeaderLeftBlock } from '@n3/kit/Layout';

Props

Название Обязательность Тип Значение по умолчанию Описание
children + ReactNode | Контент, который будет отображён в шапке страницы

Hint

Компонент всплывающей подсказки.

import { Hint } from '@n3/kit/Hint';

// ...

<Hint
  tooltip="Подсказка"
/>

Для кастомизации принимает свойства компонента Tooltip.

Input

Инпут.

import { Input } from '@n3/kit/Input';

Использование

Обычный инпут

import { useState } from 'react';
import { Input } from '@n3/kit/Input';

function Example() {
  const [value, setValue] = useState('');

  <Input
    value={value}
    onChange={(event) => {
      setValue(event.target.value);
    }}
  />
}

С кнопкой

import { useState } from 'react';
import {
  Input,
  StyledInputButton,
} from '@n3/kit/Input';

function Example() {
  const [value, setValue] = useState('');

  <Input
    value={value}
    onChange={(event) => {
      setValue(event.target.value);
    }}
    buttons={[
      (inputProps, index) => (
        <StyledInputButton
          type="button"
          key={index}
        >
          <FontAwesomeIcon
            icon="cog"
          />
        </StyledInputButton>
      ),

      (inputProps, index) => (
        <StyledInputButton
          type="button"
          key={index}
        >
          <FontAwesomeIcon
            icon="file"
          />
        </StyledInputButton>
      ),
    ]}
  />
}

Props

Input

Название Обязательность Тип Значение по умолчанию Описание
component | InputComponent | Компонент корневого элемента инпута
disabled | boolean | Выключено ли поле
hasError | boolean | Есть ли у поля ошибка
hasWarning | boolean | Есть ли у поля предупреждение
small | boolean | Маленькое ли поле
className | string | Дополнительный класс корневого компонента инпута
isOnlyBorderBottom | boolean | Отображение без рамки только с подчёркиванием снизу
buttons | RenderInputButton[] | Массив функций реднеда кнопок
@param props - все props инпута
@param index - индекс кнопки

StyledInputButton

Название Обязательность Тип Значение по умолчанию Описание
disabled | boolean | Кнопка выключена
$small | boolean | Кнопка маленькая

InputMask

Поле ввода с маской.

import { InputMask } from '@n3/kit/InputMask';

Props

Название Обязательность Тип Значение по умолчанию Описание
component | InputComponent | Компонент корневого элемента инпута
disabled | boolean | Выключено ли поле
hasError | boolean | Есть ли у поля ошибка
hasWarning | boolean | Есть ли у поля предупреждение
small | boolean | Маленькое ли поле
className | string | Дополнительный класс корневого компонента инпута
isOnlyBorderBottom | boolean | Отображение без рамки только с подчёркиванием снизу
buttons | RenderInputButton[] | Массив функций реднеда кнопок
@param renderProps - объект свойств для ренера
mask + boolean | (string | RegExp)[] | ((value: string) => maskArray) | маска в формате react-text-mask

Layout

Компонент, включающий в себя шапку и сайдбар.

import { Layout } from '@n3/kit/Layout';

Props

Название Обязательность Тип Значение по умолчанию Описание
header + HeaderParams | Объект props компонента Header
sidebar + SidebarParams | Объект props компонента Sidebar
collapsible | boolean true Возможность скрытия меню на маленьких экранах
menuCollapsed | boolean false Схлопнуто ли меню в иконки
openedGroups | { [key: string]: boolean; } "{}" Объект, показывающий, какие группы открыты
counters | { [key: string]: number; } "{}" Счётчики
countersMaxNumber | number null Максимальное число в счётчиках
children + ((renderProps: LayoutContextValue) => ReactNode) | Функция рендера контента
@param renderProps
onCollapseMenu | (nextValue: boolean) => void "(): void => {}" Обработчик схлопывания меню в иконки
@param nextValue - новое состояние схлопнутости
onToggleGroup | (groupId: string, opened: boolean) => void "(): void => {}" Обработчик скрытия/раскрытия пунктов меню
@param groupId - id группы
@param opened - новое состояние открытости/закрытости

LayoutWithoutSidebar

Компонент, включающий в себя шапку и Grid, центрирующий контент.

import { LayoutWithoutSidebar } from '@n3/kit/LayoutWithoutSidebar';

Props

Название Обязательность Тип Значение по умолчанию Описание
header + HeaderParams | Объект props компонента Header
counters | { [key: string]: number; } {} Счётчики
countersMaxNumber | number null Максимальное число в счётчиках
hasGrid | boolean true Оборачивать ли содержимое в компонент Grid
grid | GridProps {} Объект props компонента Grid
children | ReactNode null Контент

ListLayout

Лэйаут страницы списка.

import { ListLayout } from '@n3/kit/ListLayout';

Props

Название Обязательность Тип Значение по умолчанию Описание
breadcrumbs | Breadcrumb[] | Массив объектов хлебных крошек
title + node | Заголовок страницы
headerBlock | node null Блок, выводящийся между заголовком страницы и табами
actionsBlock | node null Блок действий (кнопки и т.п.)
children | node null Содержимое страницы

ListPlaceholder

Плейсхолдер пустого списка.

import {
  ListPlaceholder,
  ListPlaceholderWithoutFilters,
} from '@n3/kit/ListPlaceholder';
  • ListPlaceholder - используется в случае, когда применены фильтры
  • ListPlaceholderWithoutFilters - используется в случае, когда ни один фильтр не применён

Props

Название Обязательность Тип Значение по умолчанию Описание
children | ReactNode 'Не найдено ни одной записи' Заголовок
renderDescription | RenderDescription null Руководство к действиям
@param params - параметры
reload | () => void null Функиця перезагрузки списка, по умолчанию очищает параметры адресной строки

LoadingArea

Индикация загрузки для определённой области.

import { LoadingArea } from '@n3/kit/LoadingArea';

Props

Название Обязательность Тип Значение по умолчанию Описание
loading | boolean true Состояние загрузки
children | ReactNode null

LocalStorageLayout

Компонент, аналогичный Layout, хранящий состояние открытости/закрытости пунктов в localStorage.

Модальное окно.

import {
  Modal,
  modalSizes,
} from '@n3/kit/Modal';

...

<Modal
  show={show}
  onHide={toggleShow}
>
  <Modal.Body>
    <Modal.Title>
      Заголовок модального окна
    </Modal.Title>

    <div>
      Контент модального окна
    </div>
  </Modal.Body>

  <Modal.Footer>
    Футер модального окна
  </Modal.Footer>
</Modal>

Props

Название Обязательность Тип Значение по умолчанию Описание
size | enum
- modalSizes.DEFAULT
- modalSizes.SMALL
modalSizes.DEFAULT Размер модального окна
show + bool | Отображается ли модальное окно
hasCloseButton | bool true Отображается ли кнопка закрытия окна
onHide + func | Обработчик закрытия модального окна
isHideOnBackdropClick | bool true Закрывать ли окно при нажатии вне окна
children | node null

ModalSelect

Поле выбора из модального окна.

import { ModalSelect } from '@n3/kit/ModalSelect';

Props

Название Обязательность Тип Значение по умолчанию Описание
renderModal + (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode | Функция рендера содержимого модального окна
disabled | boolean false Выключено ли поле
hasError | boolean false Есть ли у поля ошибка
hasWarning | boolean false Есть ли у поля предупреждение
text + string | Текст, выводящийся в поле
placeholder | string ""
onChange | (nextValue: any) => void "(): void => {}" Обработчик изменения значения поля

ModalSelectButton

Кнопка, открывающая модальное окно для выбора.

import { ModalSelectButton } from '@n3/kit/ModalSelectButton';

Props

Название Обязательность Тип Значение по умолчанию Описание
className | string ""
renderModal + (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode | Функция рендера содержимого модального окна
disabled | boolean false
onSelectFromModal | (nextValue: any) => void "(): void => {}"

NestedListLayout

Лэйаут страницы списка внутри родительской сущности.

import { NestedListLayout } from '@n3/kit/NestedListLayout';

Props

Название Обязательность Тип Значение по умолчанию Описание
breadcrumbs | Breadcrumb[] | Массив объектов хлебных крошек
parentTitle + node | Заголовок родительской сущности
parentActionsBlock | node | Блок действий у заголовка родительской сущности (кнопки и т.п.)
parentStatus | node null Статус
parentStatusColor | TagColor undefined Цвет тэга статуса
headerBlock | node null Блок, выводящийся между заголовком страницы и табами
tabs | Tab[] | Табы родительской сущности
currentTab + any | id выбранного таба
title + node | Заголовок страницы
actionsBlock | node null Блок действий (кнопки и т.п.)
children | node null Содержимое страницы

NestedRoutesLayout

Пример использования:

import { NestedRoutesLayout } from '@n3/kit/NestedRoutesLayout';

// ...

const data = await fetch(/* ... */);

const NestedRoute = ({
  Layout,
  payload,
}) => (
  <Layout
    title="Вложенный заголовок"
    breadcrumbs={[{
      url: null,
      title: 'Дополнительная крошка',
    }]}
  >
    Контент
  </Layout>
);

<NestedRoutesLayout
  breadcrumbs={[{
    url: '/',
    title: 'Хлебная крошка',
  }]}
  title="Основной заголовок"
  tabs={[
    {
      id: 'tabId',
      title: 'Заголовок таба',
      to: '/tab/',
      component: NestedRoute,
    },
  ]}
  payload={data}
/>

Props NestedRoutesLayout<Payload>

Название Обязательность Тип Значение по умолчанию Описание
breadcrumbs + Breadcrumb[] | Массив объектов хлебных крошек
title + node | Заголовок страницы
actionsBlock | node | Блок действий у заголовка сущности (кнопки и т.п.)
status | node null Статус
statusColor | TagColor undefined Цвет тэга статуса
headerBlock | node null Блок, выводящийся между заголовком страницы и табами
tabs | NestedRoutesLayoutTab<Payload>[] | Табы
redirectFrom | string null Переадресация из
redirectTo | string null Переадресация в
payload | Payload null Данные, которые будут переданы во вложенные страницы

Props Layout

Название Обязательность Тип Значение по умолчанию Описание
breadcrumbs | Breadcrumb[] | Дополнительные хлебные крошки
title | node | Заголовок вложенной страницы
actionsBlock | node | Блок действий вложенной страницы
children | node null Содержимое страницы

Формат таба

Название Обязательность Тип Значение по умолчанию Описание
id + TabId | id таба
title + node | Заголовок таба
path | string | Путь страницы для react-router-dom, если не определено, используется to
to + string | url страницы
component + ComponentType<NestedRouteComponentProps<any, any>> null Компонент страницы

NestedShowLayout

import { NestedShowLayout } from '@n3/kit/NestedShowLayout';

Props

Название Обязательность Тип Значение по умолчанию Описание
breadcrumbs | Breadcrumb[] | Массив объектов хлебных крошек
title + node | Заголовок страницы
actionsBlock | node | Блок действий у заголовка сущности (кнопки и т.п.)
status | node null Статус
statusColor | TagColor undefined Цвет тэга статуса
headerBlock | node null Блок, выводящийся между заголовком страницы и табами
tabs | Tab[] | Табы
currentTab + any | id выбранного таба
children | node null Содержимое страницы

PageSizeSelect

Компонент выбора количества элементов на странице для приложений на базе @n3/kit.

import { PageSizeSelect } from '@n3/kit/PageSizeSelect';

Props

Название Обязательность Тип Значение по умолчанию Описание
start + number | Порядковый номер первого элемента
end + number | Порядковый номер последнего элемента
count + number | Общее количество элементов
value + number | Выбранное значение
options | number[] [20, 40, 100] Список возможных значений
onChange + (nextValue: number) => void | Обработчик изменения значения
@param nextValue - новое значение
toggleButtonId | string '' id кнопки открытия/закрытия меню
wrapperId | string '' id корневого элемента

PageTitle

Заголовок страницы.

import { PageTitle } from '@n3/kit/PageTitle';

Props

Название Обязательность Тип Значение по умолчанию Описание
pageType | enum
- 'list'
- 'form'
- 'parent'
'list' Тип страницы
actionsBlock | ReactNode null Блок действий (кнопки и т.п.)
status | ReactNode null Статус
statusColor | TagColor 'gray Цвет тэга статуса
children | node null Заголовок страницы

Paginator

Пагинатор.

import { Paginator } from '@n3/kit/Paginator';

Props

Название Обязательность Тип Значение по умолчанию Описание
page + number | Текущая страница пагинатора, начиная с 1
pageCount + number | Количество страниц
hrefBuilder | func undefined Функция генерации атрибута href компонента
@param {number} page - номер страницы, начиная с 1
onPageChange + func | Обработчик изменения страницы
@param {number} page - номер страницы, начиная с 1
wrapperId | string | id корневого dom-элемента

parseLayoutFromLocalStorage

Парсинг состояния Layout из localStorage.

import { parseLayoutFromLocalStorage } from '@n3/kit/LocalStorageLayout';

Provider

Компонент для задания глобальных параметров компонентов.

import { Provider } from '@n3/kit/Provider';

Props

Название Обязательность Тип Значение по умолчанию Описание
children | ReactNode undefined
theme + ThemeType | Тема в формате @n3/css-base

Radio

Радиокнопка.

import { Radio } from '@n3/kit/Radio';

Props

Название Обязательность Тип Значение по умолчанию Описание
value + ReactText | value html-элемента input, также передаётся в колбэке onChange
checked + boolean | выбрано
disabled | boolean false выключено
name | string "" name html-элемента input
label | ReactNode null текст/контент, выводящийся рядом с радио
onChange | (value: ReactText) => void (): void => {} хэндлер изменения значения, вызывается с параметрами: (newChecked)

RadioGroup

Группа радиокнопок.

import { RadioGroup } from '@n3/kit/RadioGroup';

Props

Название Обязательность Тип Значение по умолчанию Описание
inline | boolean false инлайновый вывод
name | string "" name каждого html-элемента input
value | ReactText null значение выбранной опции
disabled | boolean false выключена ли данная группа радио
options + Record<string, any>[] | список опций данной группы радио
valueKey | string "value" ключ, по которому хранятся значения в объектах options
labelKey | string "label" ключ, по которому хранятся заголовки в объектах options
onChange | (value: ReactText) => void "(): void => {}" хэндлер изменения значения

RemoveButton

Кнопка удаления.

import { RemoveButton } from '@n3/kit/RemoveButton';

Props

Название Обязательность Тип Значение по умолчанию Описание
color | enum
- buttonColors.DEFAULT
- buttonColors.PRIMARY
- buttonColors.TERTIARY
- buttonColors.DANGER
undefined Цвет кнопки
size | enum
- buttonSizes.DEFAULT
- buttonSizes.SMALL
undefined Размер кнопки
disabled | bool false Выключена ли кнопка
children + node |
remove + func | Асинхронная функция удаления
onRemoveSuccess | func undefined Обработчик успешного удаления
approveTitle | node undefined Заголовок подтверждения
approveContent | node undefined Текст подтверждения
approveButtonText + string | Текст кнопки подтвеждения
approveButtonColor | enum
- buttonColors.DEFAULT
- buttonColors.PRIMARY
- buttonColors.TERTIARY
- buttonColors.DANGER
buttonColors.DANGER Цвет кнопки подтверждения
cancelButtonText + string | Текст кнопки отмены
errorsPath | string 'response.data.detail' Путь до объекта ошибкок в случае ошибки удаления
redirectTo | any undefined Адрес редиректа в случае успешного удаления
notification | object undefined Сообщение @n3/browser-messages в случае успешного удаления

Repeat

Повторяющиеся блоки.

import { Repeat } from '@n3/kit/Repeat';

<Repeat
  title="Группа полей"
>
  <Repeat.Block
    index={0}
  >
    Блок №1
  </Repeat.Block>

  <Repeat.Block
    index={1}
  >
    Блок №2
  </Repeat.Block>

  <Repeat.Block
    index={2}
  >
    Блок №3
  </Repeat.Block>
</Repeat>

Props

Repeat

Название Обязательность Тип Значение по умолчанию Описание
disabled | boolean false Выключена ли кнопка добавления
title | ReactNode null Заголовок
addButtonTitle | ReactNode "Добавить ещё" Текст кнопки добавления
handleAdd | () => void null Обработчик нажания на кнопку добавления, если не определён, кнопка добавления не отображается

Repeat.Block

Название Обязательность Тип Значение по умолчанию Описание
disabled | boolean false Выключена ли кнопка удаления
title | ReactNode null Заголовок
index + number | Индекс в последовательности блоков
hasHorizontalPadding | boolean true Есть ли отступ от левой и правой границ до контента
handleRemove | (index: number) => void null Обработчик нажания на кнопку удаления, если не определён, кнопка удаления не отображается
@param index - индекс блока в массиве

Row

import { Row } from '@n3/kit/Row';

Props

Название Обязательность Тип Значение по умолчанию Описание
isWrap | boolean false Рендер внутренних блоков c переносами
$rowGap | string | number undefined Отступ между строками
Если число, берётся соответсвующий отступ из темы
Если строка, она напрямую используется для свойства rowGap

SearchInput

Поле поиска.

import { SearchInput } from '@n3/kit/SearchInput';

Props

Название Обязательность Тип Значение по умолчанию Описание
component | InputComponent | Компонент корневого элемента инпута
disabled | boolean false Выключено ли поле
Выключено ли поле
hasError | boolean | Есть ли у поля ошибка
hasWarning | boolean | Есть ли у поля предупреждение
small | boolean | Маленькое ли поле
className | string | Дополнительный класс корневого компонента инпута
isOnlyBorderBottom | boolean | Отображение без рамки только с подчёркиванием снизу
buttons | RenderInputButton[] | Массив функций реднеда кнопок
@param props - все props инпута
@param index - индекс кнопки
value + string | Значение поля
onChange | (event: ChangeEvent<HTMLInputElement>) => void "(): void => { }" Обработчик изменения инпута
@param event - событие
onValueChange | (nextValue: string) => void "(): void => { }" Обработчик изменения значения поля (в т.ч. при нажатии на кнопку сброса)
@param newValue - новое значение поля
handleClear | () => void "(): void => { }" Обработчик нажатия на кнопку сброса
handleSearch | (searchValue: string) => void "(): void => { }" Обработчик нажатия на кнопку поиска
@param searchValue - текущее значение поля поиска

Section

Секция.

import { Section } from '@n3/kit/Section';

Props

Название Обязательность Тип Значение по умолчанию Описание
title | string null Заголовок секции
titleColsXs | CellValue 3 Количество колонок заголовка
contentColsXs | CellValue 8 Количество колонок контента
hint | ReactNode null Подсказка, выводящаяся у заголовка поля
isEdit | boolean false Используется ли внутри формы редактирования
children | ReactNode null Контент

Select

Селект.

import { Select } from '@n3/kit/Select';

Props

Название Обязательность Тип Значение по умолчанию Описание
small | boolean false Маленькое ли поле
isMulti | boolean false Множественный выбор
isClearable | boolean true Возможность сброса значения
hasError | boolean false Есть ли у поля ошибка
hasWarning | boolean false Есть ли у поля предупреждение
value | any null Значение поля
selectRef | Ref<any> | ref для получения экземпляра react-select
renderModal | (renderProps: ModalSelectButtonModalRenderProps<ValueType>) => ReactNode undefined Функция рендера содержимого модального окна
isDisabled | boolean false Выключено ли поле
getOptionLabel | GetOptionLabel null Функция получения заголовка опции для вывода и фильтрации
labelKey | string "label" Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
getOptionValue | GetOptionValue null Функция получения значения опции
valueKey | string "value" Ключ, для получения значения опции в случае, если не определено getOptionValue
onChange | (nextValue: any) => void "(): void => {}" Обработчик изменения значения поля
@param nextValue - новое значение поля
options + OptionsType<any> GroupedOptionsType<any> | Список опций

SelectAjax

Стилизованный react-select-fetch.

import { SelectAjax } from '@n3/kit/SelectAjax';

Props

Название Обязательность Тип Значение по умолчанию Описание
small | boolean false Ма