Yii2 NavBar

Yii2 NavBar

От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы с вами рассмотрим еще один виджет – Yii2 Navbar. Данный виджет позволяет создать панель навигации, в которую удобно выводить меню.

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

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

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

<?php
 NavBar::begin();
 NavBar::end();
?>

В результате мы получим следующую картину на сайте:

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее

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. В итоге наш код может выглядеть примерно так:

<?php
 NavBar::begin([
 'options' => [
 '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 можно посмотреть в этом цикле уроков.

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree