css - Q : Import Uikit in yii\bootstrap\NavBar

Question

我使用 Yii2 框架，我在 layout/main.php 中编写了一个导航栏。我必须使用 Uikit，所以我在我的元素中导入了 css 和 js 文件，现在的问题是 yii\bootstrap\NavBar 似乎不可定制并且不支持 uikit 类。有没有办法在 yii 导航栏中使用 uk 类和 span 标签？

我有这个 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();

Answer 1

您需要在每个单独的元素中包含 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']]
];

元素的更多详细信息documentation :

• label: string, required, the nav item label.
• url: optional, the item's URL. Defaults to "#".
• visible: boolean, optional, whether this menu item is visible. Defaults to true.
• linkOptions: array, optional, the HTML attributes of the item's link.
• options: array, optional, the HTML attributes of the item container (LI).
• active: boolean, optional, whether the item should be on active state or not.
• dropDownOptions: array, optional, the HTML options that will passed to the yii\bootstrap\Dropdown widget.
• items: array|string, optional, the configuration array for creating a yii\bootstrap\Dropdown widget, or a string representing the dropdown menu. Note that Bootstrap does not support sub-dropdown menus.
• encode: boolean, optional, whether the label will be HTML-encoded. If set, supersedes the $encodeLabels option for only this item.