TonySq

TonySq

С нами с 20 мая 2018; Место в рейтинге пользователей: #1064
TonySq
23 июня 2018, 12:58
+1
Рад был помочь)
Чтоб такое феном?
TonySq
20 мая 2018, 09:00
0
Первый раз использую pdoTool, да и в общем modx только начинаю осваивать.
Поиск в интернете Bootstrap 4 + pdoMenu ничего толкового не дал, кроме пары способов с ужасными костылями. Решение для Bootstrap 3 не подходит в силу изменения верстки. Решения с заменой DIV на UL меня лично не устраивают, если разработчики решили сделать DIV, значит так лучше)
Почитал, разобрался, сделал. Для тех кому может понадобиться(не забудьте удалить комментарии из кода):
[[pdoMenu?
	&level=`2`
	&parents=`0`
	&outerClass=`navbar-nav` // Устанавливаем класс контейнера меню (<ul class="navbar-nav"></ul>)
	&rowClass=`nav-item` // Устанавливаем класс элемента меню (<li class="nav-item"></li>)
        &tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" class="nav-link">[[+menutitle]]</a></li>` // Выводим элемент меню с ссылкой (<li class="nav-item"><a href="#" class="nav-link">Link 1</a></li>)
	&tplParentRow=`@INLINE <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">[[+menutitle]]</a>[[+wrapper]]</li>` // Выводим родительский пункт меню, ссылку и иконку (<li class="nav-item dropdown"></li>)
	&tplInner=`@INLINE <div class="dropdown-menu">[[+wrapper]]</div>` // Выводим div контейнер для выпадающего меню (<div class="dropdown-menu" aria-labelledby="navbarDropdown">)
        &tplInnerRow=`@INLINE <a href="[[+link]]" class="dropdown-item">[[+menutitle]]</a>` // Выводим элементы выпадающего меню в контейнер div  (<a class="dropdown-item" href="#">Action</a>)
]]
Все отлично работает на 2 уровня, кусок кода navbar на котором тестировалось:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a href="#" class="nav-link">Link 1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Link 2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Link 3</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
            </div>