Q: Импортируйте Uikit в yii \ bootstrap \ NavBar - PullRequest
Новая
       22

Q: Импортируйте Uikit в yii \ bootstrap \ NavBar

0 голосов
/ 03 декабря 2018

Я использую Yii2 framework и пишу панель навигации в layout / main.php.Мне нужно использовать Uikit, поэтому я импортировал файлы css и js в свой проект, теперь проблема в том, что yii \ bootstrap \ NavBar, кажется, не настраивается и не поддерживает классы uikit.Есть ли способ использовать классы uk и тег span с yii navbar?

У меня есть этот HTML-код: 

<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
    <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-nav">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item
                    <span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>
                    </a></li>
                    <li class="uk-nav-header">Header</li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<div class="uk-navbar-right">
    <ul class="uk-navbar-nav">
        <li>
            <a href="#">Parent</a>
            <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-nav">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-nav-header">Header</li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

, и это реализация с компонентом yii2: 

NavBar::begin([
'brandLabel' => Html::img('/img/my_image.png'),
'brandUrl' => Yii::$app->homeUrl,
'options' => [
    'class' => 'uk-navbar navbar-fixed-top uk-align-center',
    'style' => 'background-color: orange; color: black ; height: 100px; 
    margin-top: 0; margin-bottom: 0',
    ]
 ]);
$menuItems = [
['label' => 'Home', 'url' => Yii::$app->homeUrl],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
['label' => 'Item', 'url' => ['/item']],
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right uk-link-reset',
              'style' => 'color: white'
             ],
'items' => $menuItems,
]);
NavBar::end();

1 Ответ

0 голосов
/ 03 декабря 2018

Вам необходимо включить html-параметры в каждый отдельный элемент 

$menuItems = [
    ['label' => 'Home', 'url' => Yii::$app->homeUrl],
    [
        'label'   => 'Item <span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>',
        'encode'  => false,
        'url'     => ['/item'],
        'options' => ['class' => 'uk-active'],
    ],
    ['label' => 'Item', 'url' => ['/item']],
    ['label' => 'Item', 'url' => ['/item']],
    ['label' => 'Item', 'url' => ['/item']]
];

Подробнее о товаре документация :

  • label : строка, обязательная, метка элемента навигации.
  • url : необязательно, URL элемента.По умолчанию используется "#".
  • visible : логическое значение, необязательно, независимо от того, является ли этот элемент меню видимым.По умолчанию true.
  • linkOptions : массив, необязательно, атрибуты HTML ссылки элемента.
  • options : массив, необязательно, HTMLатрибуты контейнера элемента (LI).
  • active : логический, необязательный, должен ли элемент находиться в активном состоянии или нет.
  • dropDownOptions : массив, необязательно, параметры HTML, которые будут переданы в виджет yii\bootstrap\Dropdown.
  • items : массив | строка, необязательно, массив конфигурации для создания виджета yii\bootstrap\Dropdown,или строка, представляющая выпадающее меню.Обратите внимание, что Bootstrap не поддерживает вложенные выпадающие меню.
  • encode : логическое, необязательно, будет ли метка кодирована в HTML.Если установлено, заменяет параметр $ encodeLabels только для этого элемента.
...