Виджет меню Yii2 - как установить data-submenu-title для виджета меню yii2

В настоящее время у меня есть виджет меню со следующими элементами, это элемент № 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>

person Sourabh Shah    schedule 04.12.2020    source источник
comment
первый уровень - это ваши иконки. Второй уровень должен быть «Ваучеры», а «Просмотреть все» и «Создать новый» — на третьем уровне. У вас есть скрипт для раскрывающегося меню, которое можно свернуть? Найдите его, а затем установите для своих классов ваучеры <li> и подменю ваучеров.   -  person vvpanchev    schedule 04.12.2020
comment
я не слежу за вами, да, есть класс sidebar-xs для свернутой боковой панели.   -  person Sourabh Shah    schedule 08.12.2020
comment
показать сгенерированный html из виджета меню. Это то, что вы ожидаете? Что вы хотите изменить в сгенерированном html?   -  person vvpanchev    schedule 08.12.2020
comment
Я хочу, чтобы он был похож на снимок экрана № 1, но с ярлыком ваучера вверху.   -  person Sourabh Shah    schedule 09.12.2020
comment
У вас есть сценарий, которого вы хотите достичь, или нет? Показать HTML-структуру (html-код/скрипт), которую вы ожидаете, и показать HTML-код, сгенерированный из виджета меню? Давайте сравним их и посмотрим, где ваша ошибка.   -  person vvpanchev    schedule 09.12.2020
comment
это фактически отображаемый HTML-контент   -  person Sourabh Shah    schedule 10.12.2020
comment
Пожалуйста, отредактируйте свой вопрос и установите там свой отформатированный файл. Ну, я вижу, что у вас есть ul, это подменю, но я также спросил, есть ли у вас скрипт для выпадающего меню.   -  person vvpanchev    schedule 10.12.2020
comment
обновили вопрос, скрипта нет, просто добавьте и удалите класс   -  person Sourabh Shah    schedule 10.12.2020


Ответы (1)


Выяснил это из Как получить данные из базы данных и установить как подменю в yii2?

Пришлось переместить шаблон подменю из виджета меню в $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',
                        ],

                    ];

person Sourabh Shah    schedule 11.12.2020