Root

Компонент для создания набора сценариев из View и возможностью переключаться между ними.

Связанные страницы:

Навигация

Загружается...

Применение компонента

Принимает необходимое количество View с уникальным id. Далее id с нужным сценарием передаётся в свойство activeView.

Root
  └─ View N
    └─ Panel N
      └─ PanelHeader
      └─ <content>

Если вы выносите сценарий с View в отдельный компонент, то id должен передаваться непосредственно в компонент-обёртку и уже после проксироваться во View.

src/router.tsx

const MyView = ({ id }) => {
  // проксируем `id` в View */
  return (
    <View id={id} activePanel="<panel-id>">
      ...
    </View>
  );
};
 
export const Router = () => {
  return (
    <Root activeView="my-view">
      {/* передаём `id` в компонент-обёртку */}
      <MyView id="my-view" />
    </Root>
  );
};

Иначе Root не сможет найти id из activeView среди прямых потомков в children.

Обработчики событий

`onTransition`

Свойство onTransition принимает обработчик, который вызывается при завершении анимации смены активной View.

function transitionHandler({
  // Произошел аыа
  isBack: boolean;
  // Уникальный идентификатор `View`, откуда произошел переход
  from: string;
  // Уникальный идентификатор `View`, куда произошел переход
  to: string;
}) {
    // обработчик
}
 
<Root onTransition={transitionHandler}>{/* views */}</Root>;

Свойства и методы

Свойство	Описание
`activeView`	`string` `id` активной `View`. По умолчанию: `-`
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactElement<unknown, string \| JSXElementConstructor<any>>>` Коллекция `View`. У каждой `View` должен быть `id`. По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`nav`	`string` Уникальный идентификатор навигационного элемента (вместо id) По умолчанию: `-`
`onTransition`	`((params: { isBack: boolean; from: string; to: string; }) => void)` Обработчик, который вызывается при завершении анимации смены активной `View`. По умолчанию: `-`

PanelHeaderContext

SubnavigationBar