Skip to content

Latest commit

 

History

History
135 lines (112 loc) · 5.27 KB

README.md

File metadata and controls

135 lines (112 loc) · 5.27 KB
Raw

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>

Авторы 🎨