FFCMS Wiki

Официальная документация разработчика и администратора

Инструменты пользователя

Инструменты сайта


helper:bootstrap:navbar

Bootstrap помощник - навигационная панель (Navbar)

Помощник «навигационная панель» (Navbar) является очень узкой и специфичной реализацией элементов меню сайта, которая наследует реализацию от помощника навигация, который в свою очередь наследует помощник списки.

Данный помощник предназначен для быстрой и безопасной генерации bootstrap navbar'ов. Более подробно о html/css/js особенностях navbar можно прочесть в официальной документации bootstrap.

Введение в использование

Мы не будем рассматривать все возможности, которые помощник Navbar унаследовал от Nav и Listing - вы можете ознакомиться с ними по ссылкам. Разберем достаточно простой пример элемента меню:

Navbar::display([
    'nav' => ['class' => 'navbar-default'],
    'property' => ['id' => 'headmenu', 'class' => 'navbar-nav'],
    'brand' => ['link' => 'main/to', 'text' => 'FFCMS'],
    'collapseId' => 'collapse-object',
    'items' => [
        ['link' => ['main/index'], 'text' => 'Link 1', 'property' => ['class' => 'test1'], 'position' => 'left'],
        ['link' => 'main/other', 'text' => 'Link 2', 'position' => 'left'],
        ['link' => 'main/read', 'text' => 'Link 7', 'position' => 'right'],
        'plaintext'
    ]
]);

В результате интерпритации данного кода будет получен следующий html блок:

<nav class="navbar navbar-default">
    <div>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-object">
                <span class="sr-only">Toggle menu</span><span class="icon-bar"></span><span                         class="icon-bar"></span><span class="icon-bar"></span></button>
            <a href="{$base_domain}/main/to" class="navbar-brand">FFCMS</a></div>
        <div class="collapse navbar-collapse" id="collapse-object">
            <ul id="headmenu1" class="nav navbar-nav">
                <li class="active test1"><a href="{$base_domain}/main/index">Link 1</a></li>
                <li><a href="{$base_domain}/main/other">Link 2</a></li>
            </ul>
            plaintext
            <ul id="headmenu2" class="nav navbar-nav navbar-right">
                <li><a href="{$base_domain}/main/read">Link 7</a></li>
            </ul>
        </div>
    </div>
</nav>

который будет выглядеть следующим образом:

Разберем атрибуты, переданные в виде массива в вызов Navbar::display() в примере выше:

  • nav - атрибут, позволяющий указать свойства для основного тега <nav[attributes]></nav>
  • property - атрибут, позволяющий указать свойства для основных тегов меню <ul[attributes]></ul>
  • brand - атрибут, позволяющий описать текст бренда и его ссылку
  • collapseId - атрибут, позволяющий назначающий уникальный ID для данного navbar
  • items - основной атрибут, позволяющий определить множество элементов меню

Помните, Navbar поддерживает все атрибуты, которые доступны для использования в Nav и Listing

helper/bootstrap/navbar.txt · Последние изменения: 2017/09/06 13:48 — zenn