README
@n3/react-page-blocks
Шапка и сайдбар для приложений на базе @n3/kit
.
import {
Header,
Sidebar,
Layout,
LayoutWithoutSidebar,
useLayoutState,
LocalStorageLayout,
parseLayoutFromLocalStorage,
} from '@n3/react-page-blocks';
Header
- шапка страницыSidebar
- сайдбар страницыLayout
- компонент, включающий в себя шапку и сайдбарLayoutWithoutSidebar
- компонент, включающий в себя шапку иGrid
, центрирующий контентLocalStorageLayout
- аналогиченLayout
, а также хранит состояние открытости/закрытости пунктов вlocalStorage
useLayoutState
- хук для получения состоянияLayout
(возвращаетnull
, еслиLayout
не испоьзуется)parseLayoutFromLocalStorage
- парсинг состоянияLayout
изlocalStorage
Props
Header
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
logo | + | HeaderLogoParams | Логотип в левой части | |
isUserBlockHidden | boolean | false | Скрыть ли блок текущего пользователя (аватар + имя + дропдаун с действиями) | |
showAvatar | boolean | Отображать ли аватар текущего пользователя | ||
avatar | string | Аватар текщего пользователя (отобразится плейсхолдер в случае, если аватар не задан) | ||
userName | ReactNode | Имя текщего пользователя | ||
dropdownOptions | HeaderDropdownOption[] | Опции выпадающего меню | ||
menu | HeaderMenuItem[] | Левое меню | ||
rightMenu | HeaderMenuItem[] | Правое меню | ||
withPusher | boolean | false | Добавить ли dom-элемент для отступа сверху страницы, равного высоте шапки | |
counters | { [key: string]: number; } | Счётчики | ||
countersMaxNumber | number | Максимальное число в счётчиках | ||
collapsible | boolean | Отображение иконки раскрытия бокового меню на меленьких разрешениях | ||
openMenu | () => void | Функция раскрытия бокового меню |
Sidebar
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
menuCollapsible | boolean | true | Возможность схлопывания меню в иконки | |
linksGroups | + | (SidebarLinksGroup | SidebarLink)[] | Описание пунктов | |
counters | { [key: string]: number; } | "{}" | Счётчики | |
countersMaxNumber | number | null | Максимальное число в счётчиках | |
showCountersInOpenedState | boolean | false | Показывать ли счётчики у открытых групп | |
collapsible | boolean | true | Возможность скрытия меню на маленьких экранах | |
collapsed | boolean | true | Скрыто ли меню на маленьком экране | |
openedGroups | { [key: string]: boolean; } | "{}" | Объект, показывающий, какие группы открыты | |
openedByDefault | boolean | false | Открыты ли по умолчанию группы, id которых отстуствуют в openedGroups | |
menuCollapsed | boolean | false | Схлопнуто ли меню в иконки | |
closeMenu | () => void | "(): void => {}" | Обработчик закрытия меню | |
setMenuCollapsed | (nextValue: boolean) => void | "(): void => {}" | Обработчик схлопывания меню в иконки @param nextValue - новое состояние схлопнутости |
|
onToggleGroup | (groupId: string, opened: boolean) => void | "(): void => {}" | Обработчик скрытия/раскрытия пунктов меню @param groupId - id группы @param opened - новое состояние открытости/закрытости |
link
Параметры Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
type | + | "link" | ||
id | + | string | ||
title | + | ReactNode | Заголовок ссылки | |
renderIcon | RenderSidebarIcon | null | Функция рендера иконки первого уровня | |
payload | + | { url: string; target?: string; isAnchor?: boolean; } |
group
Параметры Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
type | + | "group" | ||
id | + | string | ||
title | + | ReactNode | Заголовок группы | |
renderIcon | RenderSidebarIcon | null | Функция рендера иконки первого уровня | |
payload | + | { links: (SidebarLinksGroup | SidebarLink)[]; } |
Layout
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
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
Название | Обязательность | Тип | Значение по умолчанию | Описание |
---|---|---|---|---|
header | + | HeaderParams | Объект props компонента Header | |
counters | { [key: string]: number; } | {} |
Счётчики | |
countersMaxNumber | number | null |
Максимальное число в счётчиках | |
hasGrid | boolean | true |
Оборачивать ли содержимое в компонент Grid | |
grid | GridProps | {} |
Объект props компонента Grid | |
children | ReactNode | null |
Контент |