Skip to main content

Навігаційна панель

Навігація

Навігаційна панель

Навігаційна панель — це фіксована область у верхній частині екрана, яка містить заголовок сторінки та елементи навігації.

Навігаційна панель складається з 3 основних частин: ліва, заголовок і права. Кожна частина може містити будь-який вміст HTML, але рекомендується використовувати їх у такий спосіб:

— Left Ліва частина призначена для використання з «зворотним посиланням», іконками або одним текстовим посиланням.

— Title Частина заголовка використовується для відображення заголовка сторінки або посилань на вкладку (рядок кнопок/сегментований контролер).

— Right Права частина така ж, як і ліва.

Макет HTML панелі навігації

Макет навігаційної панелі досить простий і зрозумілий:
<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="title">Page Title</div>
        <div class="right">Right</div>
    </div>
</div>
Зауважте, що елемент title Navbar має найнижчий пріоритет ширини, і якщо екран вікна не вміщуватиме всі три елементи, частина заголовка буде вирізана. Отже, якщо ви використовуєте звичайний текст у частині заголовка Title, він матиме крапочку (...) на кінці, коли його вирізано. Але ви повинні подбати про це, якщо у вас є якісь спеціальні елементи.
Навігаційна панель із посиланнями
Щоб додати посилання в лівій або правій частині, вам просто потрібно додати звичайний тег <a> з додатковим класом посилань link:
<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left Link</a>
        </div>
        <div class="title">Page Title</div>
        <div class="right">
            <a href="#" class="link">Right Link</a>
        </div>
    </div>
</div>
Множинні посилання
Нічого надзвичайного. Просто додайте більше <a class="link"> до необхідної частини:
<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left 1</a>
            <a href="#" class="link">Left 2</a>
        </div>
        <div class="title">Page Title</div>
        <div class="right">
            <a href="#" class="link">Right 1</a>
        </div>
    </div>
</div>
Посилання з іконками + текст
Ось невелика різниця. У цьому випадку нам потрібно обернути текст посилання елементом <span>. Це потрібно для правильного інтервалу між значком і словом, а також для анімації:
<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link back">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="title">Title</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon another-icon"></i>
                <span>Menu</span>
            </a>
        </div>
    </div>
</div>
Посилання лише з іконками
Якщо потрібні посилання з іконками та без тексту, нам знадобиться додатковий клас icon-only до посилань. Це посилання на клас матиме фіксований розмір, тому ми не зможемо пропустити його пальцем:
<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon icon-back"></i>
            </a>
        </div>
        <div class="title">Title</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon another-icon"></i>
            </a>
        </div>
    </div>
</div>
Прозора навігаційна панель
З’являється прозора панель навігації з прозорим фоном і прозорим заголовком, а під час прокручування сторінки вона стає непрозорою. Щоб увімкнути прозору навігаційну панель, нам потрібно додати клас navbar-transparent до навігаційної панелі navbar:
<!-- додатковий клас "navbar-transparent". -->
<div class="navbar navbar-transparent">
  ...
</div>
Великий заголовок
Панель навігації з великим заголовком має додатковий «рядок» (або «панель») із великим текстом заголовка, який згортається під час прокручування сторінки. Щоб зробити його великим, нам потрібно додати додатковий клас navbar-large до navbar і додати до нього додатковий елемент title-large:
<!-- додатковий "navbar-large" class -->
<div class="navbar navbar-large">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <!-- ... -->
    </div>
    <!-- звичайний заголовок буде видно, коли більший заголовок згорнутий-->
    <div class="title">My App</div>
    <div class="right">
      <!-- ... -->
    </div>
    <!-- великий елемент заголовка -->
    <div class="title-large">
      <div class="title-large-text">My App</div>
    </div>
  </div>
</div>
Великий прозорий заголовок
Ми також можемо ввімкнути навігаційну панель із великим заголовком, щоб вона була «прозорою». Коли його ввімкнено, фон навігаційної панелі та її головний заголовок приховані, доки сторінка не прокрутиться. Щоб зробити великий заголовок прозорим, нам потрібен додатковий клас navbar-transparent: 
<!-- додатковий "navbar-transparent" class -->
<div class="navbar navbar-large navbar-transparent">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    ...
  </div>
</div>
Заданий темою стиль
У темах ios і aurora Navbar має тонку рамку внизу. Щоб вимкнути цю рамку, вам потрібно додати клас no-hairline до елемента navbar:
<div class="navbar no-hairline">...</div>
У темі md Navbar має тінь. Щоб вимкнути цю тінь, вам потрібно додати клас no-shadow до елемента navbar:
<div class="navbar no-shadow">...</div>

Тип панелі навігації

Тепер давайте подивимося, де ми можемо розмістити нашу навігаційну панель у DOM. Існує кілька правил розміщення Navbar.

Тип статичної навігаційної панелі

Статична позиція навігаційної панелі є, ймовірно, найбільш рідко використовуваним типом макета. У цьому випадку Navbar є лише частиною вмісту сторінки, що прокручується:
<div class="page">
  <!-- Прокручуваний вміст сторінки -->
  <div class="page-content">
    <!-- Статична панель навігації розташована на початку всередині вмісту сторінки -->
    <div class="navbar">...</div>
    ...

  </div>
</div>

Фіксований тип панелі навігації

Фіксована навігаційна панель також є частиною сторінки, але вона завжди відображається на екрані незалежно від прокручування сторінки. У цьому випадку вона має бути прямим дочірнім елементом сторінки, і якщо сторінка також має фіксовану панель інструментів, вона має бути ПЕРЕД панеллю інструментів:
<div class="page">
  <!-- Фіксована панель навігації ЗАВЖДИ йде ПЕРШОЮ -->
  <div class="navbar">...</div>
  <!-- Фіксована панель інструментів ЗАВЖДИ ПІСЛЯ панелі навігації-->
  <div class="toolbar toolbar-bottom">...</div>

  <!-- Прокручуваний вміст сторінки -->
  <div class="page-content">
    ...
  </div>
</div>
Фіксована навігаційна панель завжди має бути прямим дочірнім елементом сторінки та ПЕРЕД панеллю інструментів (якщо на цій сторінці використовується фіксована панель інструментів)

Загальний тип навігаційної панелі

Якщо нам потрібна лише одна загальна навігаційна панель для всіх сторінок у View, тоді вона має бути прямим дочірнім елементом цього перегляду та знаходитися ПЕРЕД усіма сторінками у View:
<div class="view">
  <!-- Переглянути загальну навігаційну панель -->
  <div class="navbar">...</div>

  <!-- сторінки-->
  <div class="page">...</div>
</div>
Якщо нам потрібна лише одна загальна навігаційна панель / навігаційна панель для всіх представлень, тоді вона має бути прямим дочірнім елементом Views і бути ПЕРЕД усіма представленнями.
<div class="views tabs">
  <!-- Переглядає загальну навігаційну панель -->
  <div class="navbar">...</div>

  <div class="view tab tab-active" id="tab-1">...</div>
  <div class="view tab" id="tab-2">...</div>
  ...
</div>
Common Navbar завжди має бути прямим дочірнім елементом Views/View і ПЕРЕД панеллю інструментів (якщо також використовується загальна панель інструментів)

Динамічна навігаційна панель

! Динамічна панель навігації підтримується лише в темі iOS
Однією з приголомшливих функцій теми iOS є динамічна панель навігації. Елементи панелі навігації ковзатимуть і зникатимуть під час переходу між сторінками та гортатимуть назад, якщо ввімкнено динамічну панель навігації. Її увімкнено за замовчуванням, коли ви використовуєте навігаційні панелі з фіксованим розташуванням, коли навігаційна панель є прямим дочірнім елементом сторінки. Якщо ви хочете вимкнути її, вам потрібно передати iosDynamicNavbar: false для необхідного представлення під час його ініціалізації або в глобальних параметрах застосунку для всіх представлень. Наприклад: 
//Вимкнути глобально
var app = new Techno4({
  view: {
    iosDynamicNavbar: false,
  },
});

// Вимкнути лише для перегляду його ініціалізації
var mainView = app.views.create('.view-main', {
  iosDynamicNavbar: false,
});
Зауважте, що коли динамічну навігаційну панель (iosDynamicNavbar) увімкнено, HTML-елемент Navbar буде від’єднано від сторінки та переміщено в розділ «Перегляд HTML-елемента». У цьому випадку для доступу до пов’язаного зі сторінкою динамічного елемента навігаційної панелі використовуйте метод app.navbar.getElByPage(pageEl)

Макет динамічної навігаційної панелі

Макет динамічної панелі навігації такий самий, як і для звичайної панелі навігації, єдина відмінність полягає в тому, що ви можете додати додаткові класи до частин панелі навігації (ліворуч, заголовок, праворуч), щоб визначити тип ефекту переходу для цієї частини:

— За замовчуванням (якщо немає додаткових класів) кожна частина Navbar має ефект переходу "Fade".

— Якщо ви додасте клас ковзання sliding до будь-якої частини панелі навігації, це матиме ефект «Ковзання».

— Якщо ви додасте клас ковзання sliding до внутрішньої навігаційної панел іnavbar-inner , тоді всі частини навігаційної панелі матимуть ефект «ковзання»

— Для кращого вигляду ви повинні зберегти однаковий тип переходу для тих самих частин навігаційної панелі на різних сторінках.

<!-- Жодних додаткових класів, усі елементи матимуть ефект «вицвітання» під час переходу сторінки -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- Title і Left матимуть ефект «ковзання» під час переходу сторінки -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <!-- Додатковий клас "sliding" -->
    <div class="left sliding">
      <a href="#" class="link">Home Left</a>
    </div>
    <!-- Додатковий "sliding" class -->
    <div class="title sliding">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- Усі частини матимуть ефект «ковзання» при переході сторінок -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <!-- додатковий "sliding" class -->
  <div class="navbar-inner sliding">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

Методи застосунку Navbar

Ми можемо використовувати такі методи застосунку, доступні для Navbar:
МетодОписТип
app.navbar.hide

(navbarEl, animate, hideStatusbar)

Сховати панель навігації
  • navbarEl - HTMLElement or string — (with CSS Selector)необхідної панелі навігації. Вимагається.
  • animate - Boolean — чи слід приховувати його за допомогою анімації чи ні. За замовчуванням — true
  • hideStatusbar - Boolean — якщо false (за замовчуванням), він приховує панель навігації, частково зберігаючи простір, необхідний для покриття області рядка стану. Інакше панель навігації буде повністю прихована.
HTMLElement
app.navbar.show

(navbarEl, animate)

Показати навігаційну панель
  • navbarEl - HTMLElement or string — (with CSS Selector) необхідної панелі навігації. Вимагається.
  • animate - Boolean — чи слід показувати його з анімацією чи ні. За замовчуванням — true
HTMLElement
app.navbar.size

(navbarEl)

Перерахуйте позиційні стилі для елементів Navbar. Це може бути корисним після динамічної зміни деяких елементів панелі навігації.
  • navbarEl - HTMLElement or string — (with CSS Selector) необхідної панелі навігації. Вимагається.
HTMLElement
app.navbar.getElByPage

(pageEl)

Отримати HTML-елемент навігаційної панелі за вказаним елементом сторінки. Корисно, лише якщо ввімкнено динамічну навігаційну панель. У цьому випадку він знаходиться поза контейнером сторінки.

  • pageEl - HTMLElement or string — (with CSS Selector) сторінки, де шукати панель навігації. Вимагається.
HTMLElement
app.navbar.getPageByEl

(navbarEl)

Отримати HTML-елемент сторінки за вказаним елементом навігаційної панелі. Корисно, лише якщо ввімкнено динамічну навігаційну панель. У цьому випадку він знаходиться поза контейнером сторінки.
  • navbarEl - HTMLElement or string — (with CSS Selector) панелі навігації, щоб знайти відносну сторінку. Вимагається.
HTMLElement
app.navbar.collapseLargeTitle

(navbarEl)

Згорнути великий заголовок панелі навігації
  • navbarEl - HTMLElement or string — (with CSS Selector) панелі навігації, щоб згорнути. Вимагається.
HTMLElement
app.navbar.expandLargeTitle

(navbarEl)

Розгорнути великий заголовок панелі навігації
  • navbarEl - HTMLElement or string — (with CSS Selector) навігаційної панелі для розширення. Вимагається.
HTMLElement
app.navbar.toggleLargeTitle

(navbarEl)

Перемкнути великий заголовок панелі навігації
  • navbarEl - HTMLElement or string — (with CSS Selector) навігаційної панелі для перемикання (згортання або розгортання). Вимагається.
HTMLElement

Параметри застосунку Navbar

Можна керувати певною поведінкою навігаційної панелі за замовчуванням за допомогою глобальних параметрів застосунку, передавши пов’язані з навігаційною панеллю параметри в параметрі навігаційної панелі:
ПараметрЗа замовчуваннямОписТип
hideOnPageScroll
false
Приховує навігаційні панелі під час прокручування сторінки
boolean
showOnPageScrollEnd
true
Установіть значення true, щоб показувати приховану навігаційну панель, коли прокручування досягає кінця сторінки
boolean
showOnPageScrollTop
true
Установіть значення false, і прихована панель навігації не стане видимою, коли ви щоразу прокручуєте сторінку вгору. Вони стануть видимими лише у верхній позиції прокрутки, на початку сторінки
boolean
scrollTopOnTitleClick
true
Якщо ввімкнено, кожен клацання елемента заголовка панелі навігації прокручуватиме відповідну сторінку вгору
boolean
iosCenterTitle
true
Якщо ввімкнено, він намагатиметься розмістити заголовок у центрі теми iOS. Іноді (з деяким індивідуальним дизайном) це може не знадобитися.
boolean
mdCenterTitle
false
Якщо ввімкнено, він намагатиметься розмістити заголовок у центрі теми MD. Іноді (з деяким індивідуальним дизайном) це може не знадобитися.
boolean
auroraCenterTitle
true
Якщо ввімкнено, він намагатиметься розмістити заголовок у центрі теми Aurora. Іноді (з деяким індивідуальним дизайном) це може не знадобитися.
boolean
collapseLargeTitleOnScroll
true
Якщо ввімкнено, великий заголовок буде згорнутий угорі прокручування сторінки та знову розгорнутий у верхній частині сторінки.
boolean
snapPageScrollToLargeTitle
true
Якщо ввімкнено, прокручування сторінки прив’язуватиметься до позицій згортання/розгортання великого заголовка, тому залишити прокручування сторінки в середині позиції великого заголовка буде неможливо. Діє лише тоді, коли ввімкнено collapseLargeTitleOnScroll.
boolean
snapPageScrollToTransparentNavbar
true
Якщо ввімкнено, прокручування сторінки буде прив’язане до розміру прозорої навігаційної панелі, тому неможливо залишити прокручування сторінки в середині прозорої навігаційної панелі..
boolean
Наприклад :
var app = new Techno4({
  navbar: {
    hideOnPageScroll: true,
    iosCenterTitle: false,
  },
});

Керуйте панеллю навігації за допомогою класів сторінок

Techno4 дозволяє вам приховати/показати панель навігації на певній сторінці або на певній прокрутці сторінки за допомогою додаткових класів. Якщо ви хочете приховати навігаційну панель під час прокручування певної сторінки, скористайтеся додатковими класами для елемента <div class="page-content"> цієї сторінки:

  • hide-bars-on-scroll — щоб приховати панель навігації та панель інструментів під час прокручування сторінки
  • hide-navbar-on-scroll — щоб приховати навігаційну панель під час прокручування сторінки Щоб вимкнути цю поведінку на певних сторінках, ви можете використати такі додаткові класи:
  • keep-bars-on-scroll — щоб навігаційна панель і панель інструментів залишалися під час прокручування сторінки
  • keep-navbar-on-scroll — щоб навігаційна панель залишалася під час прокручування сторінки Наприклад :
<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- "hide-navbar-on-scroll" class to hide Navbar -->
  <div class="page-content hide-navbar-on-scroll">
    <div class="block">
      <p>Scroll page down</p>
      ...
    </div>
  </div>
</div>
Якщо у вас є спільна панель навігації на всіх сторінках/переглядах вашої застосунку, ви можете автоматично приховати/показати панель навігації для деяких сторінок, де вона вам не потрібна. Щоб це запрацювало, усе, що вам потрібно, це додати клас no-navbar до завантаженої сторінки (<div class="page no-navbar">): 
<!-- Page has additional "no-navbar" class -->
<div class="page no-navbar">
  <div class="page-content">
      ...
  </div>
</div>

Події панелі навігації

Navbar запускатиме такі події DOM в елементі Navbar (<div class="navbar">) і події застосунку в екземплярі застосунку:

Події DOM

ПодіяОб'єктОписТип
navbar:hide
Navbar

<div class="navbar">

Подія буде запущена, коли навігаційна панель стане прихованою
string
navbar:show
Navbar

<div class="navbar">

Подія буде запущена, коли навігаційна панель стане видимою
string
navbar:collapse
Navbar

<div class="navbar">

Подія буде ініційована, коли навігаційна панель із великим заголовком згортається (з великої навігаційної панелі на звичайну навігаційну панель)
string
navbar:expand
Navbar

<div class="navbar">

Подія буде ініційована, коли навігаційна панель із великим заголовком розгортається (від звичайної навігаційної панелі до великої навігаційної панелі)
string

Події застосунку

ПодіяАргументОписТип
navbarHide
(el)
Подія буде запущена, коли навігаційна панель стане прихованою
string
navbarShow
(el)
Подія буде запущена, коли навігаційна панель стане видимою
string
navbarCollapse
(el)
Подія буде ініційована, коли навігаційна панель із великим заголовком згортається (з великої навігаційної панелі на звичайну навігаційну панель)
string
navbarExpand
(el)
Подія буде ініційована, коли навігаційна панель із великим заголовком розгортається (від звичайної навігаційної панелі до великої навігаційної панелі)
string

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  /*
  --t4-navbar-bg-color: var(--t4-bars-bg-color);
  --t4-navbar-bg-color-rgb: var(--t4-bars-bg-color-rgb);
  --t4-navbar-bg-image: var(--t4-bars-bg-image);
  --t4-navbar-border-color: var(--t4-bars-border-color);
  --t4-navbar-link-color: var(--t4-bars-link-color);
  --t4-navbar-text-color: var(--t4-bars-text-color);
  */
  --t4-navbar-hide-show-transition-duration: 400ms;
  --t4-navbar-title-line-height: 1.2;
  --t4-navbar-title-font-size: inherit;
  --t4-navbar-subtitle-text-align: inherit;
  --t4-navbar-large-title-line-height: 1.2;
  --t4-navbar-large-title-text-color: inherit;
  --t4-navbar-large-title-padding-left: 16px;
  --t4-navbar-large-title-padding-right: 16px;
}
.ios {
  --t4-navbar-height: 44px;
  --t4-navbar-tablet-height: 44px;
  --t4-navbar-font-size: 17px;
  --t4-navbar-inner-padding-left: 8px;
  --t4-navbar-inner-padding-right: 8px;
  --t4-navbar-title-font-weight: 600;
  --t4-navbar-title-margin-left: 0;
  --t4-navbar-title-margin-right: 0;
  --t4-navbar-title-text-align: center;
  --t4-navbar-subtitle-font-size: 10px;
  --t4-navbar-subtitle-line-height: 1;
  --t4-navbar-shadow-image: none;
  --t4-navbar-large-title-height: 52px;
  --t4-navbar-large-title-font-size: 34px;
  --t4-navbar-large-title-font-weight: 700;
  --t4-navbar-large-title-letter-spacing: -0.03em;
  --t4-navbar-large-title-padding-vertical: 6px;
  /*
  --t4-navbar-link-height: var(--t4-navbar-height);
  --t4-navbar-link-line-height: var(--t4-navbar-height);
  */
  --t4-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
}
.ios .dark,
.ios.dark {
  --t4-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --t4-navbar-height: 56px;
  --t4-navbar-tablet-height: 64px;
  --t4-navbar-font-size: 20px;
  --t4-navbar-inner-padding-left: 4px;
  --t4-navbar-inner-padding-right: 4px;
  --t4-navbar-title-font-weight: 500;
  --t4-navbar-title-margin-left: 20px;
  --t4-navbar-title-margin-right: 16px;
  --t4-navbar-title-text-align: left;
  --t4-navbar-subtitle-font-size: 14px;
  --t4-navbar-subtitle-line-height: 1.2;
  --t4-navbar-shadow-image: var(--t4-bars-shadow-bottom-image);
  --t4-navbar-large-title-font-size: 34px;
  --t4-navbar-large-title-height: 56px;
  --t4-navbar-large-title-font-weight: 500;
  --t4-navbar-large-title-letter-spacing: 0;
  --t4-navbar-large-title-padding-vertical: 8px;
  --t4-navbar-link-height: 48px;
  --t4-navbar-link-line-height: 48px;
  --t4-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
}
.md .dark,
.md.dark {
  --t4-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
}
.aurora {
  --t4-navbar-height: 56px;
  --t4-navbar-tablet-height: 56px;
  --t4-navbar-font-size: 18px;
  --t4-navbar-inner-padding-left: 16px;
  --t4-navbar-inner-padding-right: 16px;
  --t4-navbar-title-font-weight: bold;
  --t4-navbar-title-margin-left: 0;
  --t4-navbar-title-margin-right: 0;
  --t4-navbar-title-text-align: center;
  --t4-navbar-subtitle-font-size: 14px;
  --t4-navbar-subtitle-line-height: 1;
  --t4-navbar-shadow-image: none;
  --t4-navbar-large-title-height: 48px;
  --t4-navbar-large-title-font-size: 28px;
  --t4-navbar-large-title-font-weight: bold;
  --t4-navbar-large-title-letter-spacing: 0;
  --t4-navbar-large-title-padding-vertical: 7px;
  --t4-navbar-link-height: auto;
  --t4-navbar-link-line-height: inherit;
  --t4-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .dark,
.aurora.dark {
  --t4-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
}

Приклади

Статична навігаційна панель 

<template>
  <div class="page no-navbar">
    <div class="page-content">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="left">
            <a class="link back">
              <i class="icon icon-back"></i>
              <span class="if-not-md">Back</span>
            </a>
          </div>
          <div class="title">Static Navbar</div>
          <div class="right"></div>
        </div>
      </div>
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>

Фіксована навігаційна панель 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Fixed Navbar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>

Прозора навігаційна панель 

<template>
  <div class="page">
    <div class="navbar navbar-transparent">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Transparent Navbar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>

Великий заголовок Navbar 

<template>
  <div class="page">
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Large Title</div>
        <div class="title-large">
          <div class="title-large-text">Large Title</div>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>

Великий прозорий Navbar 

<template>
  <div class="page">
    <div class="navbar navbar-large navbar-transparent">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Large Transparent</div>
        <div class="title-large">
          <div class="title-large-text">Large Transparent</div>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>

API навігаційної панелі 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Navbar API</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p><a class="button button-raised button-fill" @click=${hideNavbar}>Hide Navbar</a></p>
        <p><a class="button button-raised button-fill" @click=${showNavbar}>Show Navbar</a></p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $on, $t4 }) => {
    let navbarEl;
    const hideNavbar = () => {
      $t4.navbar.hide(navbarEl);
    }
    const showNavbar = () => {
      $t4.navbar.show(navbarEl);
    }
    $on('pageInit', (e, page) => {
      navbarEl = $t4.navbar.getElByPage(page);
    });

    return $render;
  }
</script>

Сховати під час прокручування 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Hide On Scroll</div>
      </div>
    </div>
    <div class="page-content hide-navbar-on-scroll">
      <div class="block">
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
          alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
          similique!</p>
        <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
          porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
        <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
          ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
        <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
          possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
          Sunt, ad aliquam!</p>
        <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
          consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
          reprehenderit!</p>
      </div>
    </div>
  </div>
</template>