Epic

Когда использовать?

• Вы разрабатываете мобильное приложение (viewWidth <= SMALL_TABLET).
• По дизайну требуется панель с быстрой навигацией на основные разделы.

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

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

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

Tabbar

Подкомпонент прибивает элементы навигации (TabbarItem) к низу экрана. Передаётся в свойство tabbar компонента Epic.

Выравнивание

В случае, если в Tabbar передан один или два элемента TabbarItem, контент внутри этих элементов располагается по горизонтали, в остальных случаях контент располагается вертикально.

С помощью свойства mode у Tabbar можно переопределить это поведение.

• "vertical" — задаёт всегда вертикальное расположение;
• "horizontal" — задаёт всегда горизонтальное расположение.

TabbarItem

Подкомпонент позволяет создать навигационный элемент. Чаще всего представлен иконкой размером 28px. Допускается использовать текст рядом с иконкой. Иконку необходимо передавать в свойство children, текст — в свойство label.

Иконка и текст могут располагаться либо горизонтально, либо вертикально. Управлять этим поведением можно с помощью свойства mode у Tabbar.

Выбранное состояние

Используйте свойство selected, чтобы показать текущий активный раздел.

Индикатор

С помощью свойства indicator можно задать для компонента счётчик или индикатор уведомления. Передавайте компоненты Counter с size="s" или Badge.

Тэг компонента

Через свойство Component можно переопределить тэг, который будет отрендерен компонентом (по умолчанию при передаче свойства href компонент использует тэг a, в иных случаях button);

Доступность (a11y)

Если вы не передаете свойство label, то ассистивные технологии не смогут однозначно озвучить ваш элемент. В таком случае рекомендуется вместе с иконкой передавать в свойство children компонент VisuallyHidden с поясняющим текстом.

import { Icon28UserCircleOutline } from '@vkontakte/icons';
import { TabbarItem, VisuallyHidden } from '@vkontakte/vkui';
 
<TabbarItem>
  {/* Данный текст будет озвучен скринридером */}
  <VisuallyHidden>Профиль</VisuallyHidden>
  <Icon28UserCircleOutline />
</TabbarItem>;

В качестве альтернативного решение можно передать текст для скринридера в свойство aria-label или создать отдельный элемент с текстом и передать его id в свойство aria-labelledby.

<TabbarItem aria-label="Профиль">
  <Icon28UserCircleOutline />
</TabbarItem>

<span id="my-label">Профиль</span>
 
<TabbarItem aria-labelledby="my-label">
  <Icon28UserCircleOutline />
</TabbarItem>

Адаптивность

Если у вашего приложения есть настольный режим, то по дизайну скорей всего нужно будет заменять tabbar на другое меню. Чтобы спрятать tabbar на настольном экране – используйте хук useAdaptivityConditionalRender.

export default function App() {
  const { viewWidth } = useAdaptivityConditionalRender();
 
  return (
    <Epic
      activeStory={activeStory}
      tabbar={
        viewWidth.tabletPlus && (
          <Tabbar className={viewWidth.tabletPlus.className}>
            <TabbarItem label="Лента" selected onClick={() => setActiveStory('feed')}>
              <Icon28NewsfeedOutline />
            </TabbarItem>
            <TabbarItem label="Профиль" onClick={() => setActiveStory('profile')}>
              <Icon28UserCircleOutline />
            </TabbarItem>
          </Tabbar>
        )
      }
    >
      <View id="feed" activePanel="feed-panel">
        <Panel id="feed-panel">
          <PanelHeader>Лента</PanelHeader>
          <Placeholder stretched>
            <Icon28NewsfeedOutline />
          </Placeholder>
        </Panel>
      </View>
      <View id="profile" activePanel="profile-panel">
        <Panel id="profile-panel">
          <PanelHeader>Профиль</PanelHeader>
          <Placeholder stretched>
            <Icon28UserCircleOutline />
          </Placeholder>
        </Panel>
      </View>
    </Epic>
  );
}

Примеры замены tabbar на меню приведён на странице Навигация | Пример.

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