0.2.2 • Published 3 years ago
@n3/react-layouts
Лэйауты страниц для приложений на базе @n3/kit
.
import {
CreateLayout,
EditLayout,
ListLayout,
NestedListLayout,
ShowLayout,
NestedShowLayout,
} from '@n3/react-layouts';
CreateLayout
- страница создания;EditLayout
- страница редактрования;ListLayout
- страница списка;NestedListLayout
- страница вложенного списка (например, список документов конкретной организации);ShowLayout
- страница просмотра;NestedShowLayout
- страница просмотра с табами;NestedRoutesLayout
- группа вложенных страниц, интегрированная с react-router-dom
.
Props
CreateLayout
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|
breadcrumbs | | Breadcrumb[] | | Массив объектов хлебных крошек |
title | + | node | | Заголовок страницы |
headerBlock | | node | null | Блок, выводящийся между заголовком страницы и табами |
children | | node | null | Содержимое страницы |
EditLayout
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|
breadcrumbs | | Breadcrumb[] | | Массив объектов хлебных крошек |
title | + | node | | Заголовок страницы |
headerBlock | | node | null | Блок, выводящийся между заголовком страницы и табами |
children | | node | null | Содержимое страницы |
ListLayout
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|
breadcrumbs | | Breadcrumb[] | | Массив объектов хлебных крошек |
title | + | node | | Заголовок страницы |
headerBlock | | node | null | Блок, выводящийся между заголовком страницы и табами |
actionsBlock | | node | null | Блок действий (кнопки и т.п.) |
children | | node | null | Содержимое страницы |
NestedListLayout
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|
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 | Содержимое страницы |
ShowLayout
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|
breadcrumbs | | Breadcrumb[] | | Массив объектов хлебных крошек |
title | + | node | | Заголовок страницы |
status | | node | null | Статус |
statusColor | | TagColor | undefined | Цвет тэга статуса |
headerBlock | | node | null | Блок, выводящийся между заголовком страницы и табами |
children | | node | null | Содержимое страницы |
NestedShowLayout
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|
breadcrumbs | | Breadcrumb[] | | Массив объектов хлебных крошек |
title | + | node | | Заголовок страницы |
actionsBlock | | node | | Блок действий у заголовка сущности (кнопки и т.п.) |
status | | node | null | Статус |
statusColor | | TagColor | undefined | Цвет тэга статуса |
headerBlock | | node | null | Блок, выводящийся между заголовком страницы и табами |
tabs | | Tab[] | | Табы |
currentTab | + | any | | id выбранного таба |
children | | node | null | Содержимое страницы |
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
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|
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 | Компонент страницы |