От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой статье мы с вами рассмотрим еще один виджет – Yii2 Navbar. Данный виджет позволяет создать панель навигации, в которую удобно выводить меню.
Как вы знаете, фреймворк Yii2 из коробки поддерживает другой фреймворк, только фреймворк CSS. Речь идет о CSS фреймворке Bootstrap. Стили данного фреймворка не только подключены по умолчанию, но Yii дополнительно предлагает нам целый набор виджетов для реализации компонентов Bootstrap: Carousel, Tabs, Modal, Collapse, Menu и другие.
На самом деле для реализации на сайте любого из этих компонентов совсем не обязательно использовать предлагаемые виджеты Yii2, но коль они есть, то почему бы и нет. Сегодня мы рассмотрим один из таких виджетов – NavBar.
Данный виджет позволяет сгенерировать панель навигации, которая фактически является визитной карточкой Bootstrap. Все, что нам нужно для базового использования данного виджета, — это вызвать методы begin и end виджета. Давайте попробуем сделать это в нужном месте шаблона.
|
1 2 3 4 |
<?php NavBar::begin(); NavBar::end(); ?> |
В результате мы получим следующую картину на сайте:
Пустая навигационная панель, в которую мы можем что-то выводить, например логотип, меню и т.п. К слову, для вывода меню мы можем использовать как уже знакомый нам виджет Menu, так и виджет Nav.
Теперь давайте поиграемся с настройками панели. Параметры настроек мы можем передать в виде массива методу begin. К примеру, давайте добавим ряд классов Bootstrap для оформления navbar:
|
1 2 3 4 5 |
NavBar::begin([ 'options' => [ 'class' => 'navbar-inverse navbar-fixed-top', ], ]); |
Это сделает нашу панель темной и зафиксирует ее сверху страницы.
Теперь давайте добавим логотип и сделаем его ссылкой. Для этого воспользуемся опциями brandLabel и brandUrl:
|
1 2 3 4 5 6 7 |
NavBar::begin([ 'options' => [ 'class' => 'navbar-inverse navbar-fixed-top', ], 'brandLabel' => 'Logo', 'brandUrl' => Yii::$app->homeUrl, ]); |
Ну и, наконец, давайте добавим несколько пунктов меню. Для этого используем виджет Nav. В итоге наш код может выглядеть примерно так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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 можно посмотреть в этом цикле уроков.
