Про Tab и про View

Отступление: Views и View

На данный Framework7 не позволяет использовать View во View. Вот так можно делать:

View

Views > View, View,…,View

Вот так нельзя:

View > view

Views > Views > View

Views > View > View

View > Views > View, View, … , View

Но для этого правила есть исключение. Внутри Popup, Popover, Actions Sheet, Login Screen и Sheet Modal можно сделать свое полноценное View, ведь технически оно будет находиться за пределами Current View в DOM.

Какие бывают Tabs

В Framework7 возможно 3 принципиально разных варианта работы вкладок.

Страница содержит весь контент

На странице находится контент всех вкладок, а переключением вкладок мы меняем то, что в данный момент показывается пользователю. “Вглубь” уходить нельзя, открытие новой страницы заменяет текущую полностью.

Когда использовать: когда немного контента и нет сложной логики. Пример: разделы справочного руководства.

Routable Tabs

На странице изначально нет контента вкладок, каждая вкладка имеет свой маршрут загрузки данных. Содержимое конкретной вкладки впервые загружается при первом ее показе, а при последующих открытиях оно может браться из кэша или загружаться заново - за это отвечает параметр unloadTabContent во View.

“Вглубь” уходить нельзя, открытие новой страницы заменяет текущую полностью.

Когда использовать: когда много контента или много вкладок и / или когда нужна вся мощь Router Component для каждой вкладки.

Views as Tabs

В данном случае мы имеем такую структуру: Views > View, где View - это Tab. Получается, что каждая вкладка - это полностью независимая сущность, в которой можно уходить в глубину.

Когда использовать: когда нам нужна полная независимость вкладок. Пример: первая вкладка - лента новостей, вторая - личная почта, третья - список подписок.

При использовании Views as Tabs есть маленькая особенность. Допустим, нам нужно открыть Page, которая не будет иметь отношения ни к одной из вкладок, например, “Настройки”. Мы можем открыть ее только в определенном View, а не в каком-то новом View, который находится за пределами Views. Так как страница общая, то сами ссылки на вкладки на ней не нужны. Для этого есть два варианта:

  1. Добавить к Page класс no-toolbar (в этом случае будет анимация скрытия при переходе на страницу).
  2. В pageInit для этой страницы убирать toolbar вручную.

Переход между вкладками

Не важно какие вкладки мы используем, мы можем выбрать такие виды отображения перехода:

  1. Мгновенный - кликнули, контент обновился.
  2. Анимационный - переход между вкладками сопровождается анимацией.
  3. Swipeable - можно свайпом переключаться между вкладками.

Если вы используете Views как Tabs, то ознакомьтесь с этими ссылками, там рассказано как сделать 2 и 3 способ:

3 Likes