Yii2 菜单小部件 - 如何为 yii2 菜单小部件设置 data-submenu-title

Question

我目前有一个菜单小部件，其中包含以下项目这是项目#1


 $menuIteams[] = [

                                'label'    => 'Vouchers',
                                'url'      => '#',
                                'template' => '<a href="{url}" class="nav-link"><i class="icon-cash3"></i> <span>
                        {label}
                        <span class="d-block font-weight-normal opacity-50"></span> </a>',
                                'items'    => [
                                    ['label' => 'View All', 'url' => ['/voucher/index'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-copy3"></i> {label}<span> </a>'],
                                    ['label' => 'Create New', 'url' => ['/voucher/create'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-pen6"></i> {label}<span> </a>'],
                                ],
                                'options'  => [
                                    'class'              => 'nav-item nav-item-submenu',
                                    'data-submenu-title' => 'Layouts',
                                ],

                            ];

并且正在将所有项目附加到菜单小部件

echo \yii\widgets\Menu::widget([
                        'options'         => [
                            'class'         => 'nav nav-sidebar',
                            'data-nav-type' => 'accordion',
                        ],
                        'items'           => $menuIteams,
                        'itemOptions'     => array('class' => 'nav-item'),
                        'submenuTemplate' => "\n<ul class='nav nav-group-sub'>\n{items}\n</ul>\n",
                        'encodeLabels'    => false, //allows you to use html in labels
                        'activateParents' => false,
                    ]);

我想让我的 menuIteams[] {label} 出现在每个子菜单项的顶部

所以对于上面的例子，代金券将出现在子菜单的顶部，然后是项目列表

用图片更好地解释

这与这相似

当然应该折叠侧边栏，子菜单应该显示为类似于图片#1 的下拉菜单

Html 渲染

<li class="nav-item nav-item-submenu" data-submenu-title="Layouts"><a href="#" class="nav-link"><i class="fas fa-print"></i> <span>
                        Print Digital
                        <span class="d-block font-weight-normal opacity-50"></span> </a>
<ul class='nav nav-group-sub' data-submenu-title=<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-extra-material-master/index" class="nav-link"><i class="icon-copy3"></i> Extra Material<span> </a></li>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-finishing-master/index" class="nav-link"><i class="icon-copy3"></i> Finishing<span> </a></li>>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-extra-material-master/index" class="nav-link"><i class="icon-copy3"></i> Extra Material<span> </a></li>
<li class="nav-item"><a href="/angle-advertising/backend/web/index.php/job-card-print-digital-finishing-master/index" class="nav-link"><i class="icon-copy3"></i> Finishing<span> </a></li>
</ul>
</li>

预计

<li class="nav-item nav-item-submenu nav-item-open">
                            <a href="#" class="nav-link"><i class="icon-color-sampler"></i> <span>Themes</span></a>

                            <ul class="nav nav-group-sub" data-submenu-title="Themes" style="display: block;">
                                <li class="nav-item"><a href="index.html" class="nav-link active">Default</a></li>
                                <li class="nav-item"><a href="../../../LTR/material/full/index.html" class="nav-link">Material</a></li>
                                <li class="nav-item"><a href="../../../LTR/dark/full/index.html" class="nav-link">Dark</a></li>
                                <li class="nav-item"><a href="../../../LTR/clean/full/index.html" class="nav-link disabled">Clean <span class="badge bg-transparent align-self-center ml-auto">Coming soon</span></a></li>
                            </ul>
                        </li>

Answer 1

从

中得出

必须将子菜单模板从菜单小部件移动到 $menuIteams[]

$menuIteams[] = [

                        'label'    => 'Cash Requisition',
                        'submenuTemplate' => "\n<ul class='nav nav-group-sub' data-submenu-title='Cash Requisition'>\n{items}\n</ul>\n",
                        'url'      => '#',
                        'template' => '<a href="{url}" class="nav-link"><i class="icon-cash3"></i> <span>
                        {label}
                        <span class="d-block font-weight-normal opacity-50"></span> </a>',
                        'items'    => [
                            ['label' => 'View All Cash Requisitions', 'url' => ['/voucher/index'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-copy3"></i> {label}<span> </a>'],
                            ['label' => 'Create New Cash Requisition', 'url' => ['/voucher/create'], 'template' => '<a href="{url}" class="nav-link"><i class="icon-pen6"></i> {label}<span> </a>'],
                        ],
                        'options'  => [
                            'class'              => 'nav-item nav-item-submenu',
                        ],

                    ];

Yii2 菜单小部件 - 如何为 yii2 菜单小部件设置 data-submenu-title

Yii2 Menu widget - how to set data-submenu-title for yii2 menu widget

yii2

yii2-widget