29
Сен
2017

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 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 можно посмотреть в этом цикле уроков.

Источник: https://webformyself.com/yii2-navbar/

Тебе может это понравится...

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