Vkui-navigator NPM

VKUI Navigator

Данный модуль позволяет быстро и просто создать базовую логику навигации для сервиса на платформе VK Mini Apps. Поддерживает все необходимые функции и инкапсулирует в себе базовое поведение на всех платформах (такое как свайпы на iOS и кнопка "назад" на Android)

Демо приложение 📱

Установка 📦

Выполните yarn add vkui-navigator или npm i vkui-navigator

Быстрый старт 🚀

import { Stack, Page } from "vkui-navigator/dist";

// simple usage
<Stack activePage="page1">
    <Page id="page1" activePanel="welcome">
        <Welcome id="welcome"/>
    </Page>
</Stack>

Принцип работы

Вокруг ваших панелей создается View со втроенной базовой логикой. Каждой панели передается в props объект navigator. В нем содержаться методы и параметры, который вы передали из предыдущей панели. Также есть поддержка модальных окон и попапов

API Справочник

Stack

▸ Корневой элемент навигации

Props:

Название	Тип	Описание
`activePage`	string, required	Идентификатор активной страницы
`modals`	array of node	Массив модальных окон

Page

▸ Основная единица модуля. Включает в себя логику навигации между панелями

Props:

Название	Тип	Описание
`id`	string, required	Идентификатор, который передается View внутри компонента
`activePanel`	string	Идентификатор начальной панели
`header`	bool	Показать/скрыть header (эквивалент `header` во View)
`title`	string	Название пункта в таббаре (при его использовании)
`icon`	string	Иконка пункта в таббаре (при его использовании)

Tabbar

▸ Умный таббар

Props:

Название	Тип	Описание
`id`	string, required	Идентификатор, который передается Epic внутри компонента
`activeStory`	string, required	Идентификатор начальной страницы (Page)

Navigator

▸ Объект, передаваемый в props всем панелям и модальным окнам.

Structure:

Название	Тип	Описание
`go(id:String, params={})`	func	Переход на панель с идентификатором `id`
`goPage(id:String, params={})`	func	Переходит на другу страницу Page (из Stack)
`goBack`	func	Возвращает на одну панель назад
`showModal(id:String, params={})`	func	Показывает модальное окно с идентификатором `id`
`hideModal`	func	Скрывает все активные модальные окна
`showPopout(popout:Node)`	func	Показывает переданный попаут
`hidePopout`	func	Скрывает все активные попауты
`showLoader`	func	Показывает спиннер загрузки
`hideLoader`	func	Скрывает спиннер загрузки
`params`	object	Параметры, которые передаются через `go` или `showModal`

Примеры 📚

Пример с панелью

const Panel1 = ({ id, navigator }) => (
    <Panel id={id}>
        <PanelHeader>
            Панель 1
        </PanelHeader>
        <Group>
            <Button onClick={() => navigator.go("panel2")}>
                Вперед
            </Button>
        </Group>
    </Panel>
);

const Panel2 = ({ id, navigator }) => (
    <Panel id={id}>
        <PanelHeader>
            Панель 2
        </PanelHeader>
        <Group>
            <Button onClick={() => navigator.goBack()}>
                Назад
            </Button>
        </Group>
    </Panel>
);

<Stack activePage="page1">
    <Page id="page1" activePanel="panel1">
        <Panel1 id="panel1"/>
        <Panel2 id="panel2"/>
    </Page>
</Stack>