VKUI Navigator (WARN: DEPRECATED!)
Данный модуль позволяет быстро и просто создать базовую логику навигации для сервиса на платформе 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>