@n3/react-page-blocks

Page blocks (header and sidebar) for react applications based on @n3/kit

Usage no npm install needed!

<script type="module">
  import n3ReactPageBlocks from 'https://cdn.skypack.dev/@n3/react-page-blocks';
</script>

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 Контент