Yii2 NavBar

16

Від автора: вітаю вас, друзі. Ми продовжуємо цикл статей, присвячених знайомству з фреймворком Yii2. У цій статті ми з вами розглянемо ще один віджет – Yii2 Navbar. Даний віджет дозволяє створити панель навігації, у яку зручно виводити меню.

Як ви знаєте, фреймворк Yii2 з коробки підтримує інший фреймворк, тільки CSS фреймворк. Мова йде про CSS фреймворку Bootstrap. Стилі цього фреймворку не тільки підключені за замовчуванням, але Yii додатково пропонує нам цілий набір віджетів для реалізації компонентів Bootstrap: Carousel, Tabs, Modal, Collapse, Menu та інші.

Насправді для реалізації на сайті будь-якого з цих компонентів зовсім не обов’язково використовувати запропоновані віджети Yii2, але якщо вони є, то чому б і ні. Сьогодні ми розглянемо один з таких віджетів – NavBar.

Даний віджет дозволяє згенерувати панель навігації, яка фактично є візитною карткою Bootstrap. Все, що нам потрібно для базового використання цього віджета, — це викликати методи begin і end віджета. Давайте спробуємо зробити це в потрібному місці шаблону.

В результаті ми отримаємо наступну картину на сайті:

Yii2 NavBar

Порожня навігаційна панель, в яку ми можемо щось виводити, наприклад логотип, меню і т. п. До речі, для виведення меню ми можемо використовувати як вже знайомий нам віджет Menu, так і віджет Nav.

Тепер давайте пограємося з налаштуваннями панелі. Параметри налаштувань ми можемо передати у вигляді масиву методом begin. До прикладу, давайте додамо ряд класів Bootstrap для оформлення navbar:

NavBar::begin([
‘options’ => [
‘class’ => ‘navbar-inverse navbar-fixed-top’,
],
]);

Це зробить нашу панель темною і зафіксує її зверху сторінки.

Yii2 NavBar

Тепер давайте додамо логотип і зробимо його посиланням. Для цього скористаємося опціями brandLabel і brandUrl:

NavBar::begin([
‘options’ => [
‘class’ => ‘navbar-inverse navbar-fixed-top’,
],
‘brandLabel’ => ‘Logo’,
‘brandUrl’ => Yii::$app->homeUrl,
]);

Yii2 NavBar

Ну і, нарешті, давайте додамо кілька пунктів меню. Для цього використовуємо віджет Nav. У підсумку наш код може виглядати приблизно так:

[
‘class’ => ‘navbar-inverse navbar-fixed-top’,
],
‘brandLabel’ => ‘Logo’,
‘brandUrl’ => Yii::$app->homeUrl,
]);
echo Nav::widget([
‘options’ => [‘class’ => ‘navbar-nav navbar-right’],
‘items’ => [
[‘label’ => ‘Home’, ‘url’ => [‘/site/index’]],
[‘label’ => ‘About’, ‘url’ => [‘/site/about’]],
[‘label’ => ‘Contact’, ‘url’ => [‘/site/contact’]],
],
]);
NavBar::end();
?>

Ну а на сторінці ми побачимо стандартну бутстраповскую панель навігації.

Yii2 NavBar

На цьому сьогодні все. Більше про фреймворку ви можете дізнатися з наших безкоштовних або платних уроків. Також створення найпростішого блогу на Yii2 можна подивитися в цьому циклі уроків.