96 lines
4.4 KiB
HTML
96 lines
4.4 KiB
HTML
<!-- templates/fragments/menu.html -->
|
|
<ul class="navbar-nav pt-lg-3" th:fragment="menuList(menus)">
|
|
<li th:each="menu : ${menus}" th:classappend="${#lists.isEmpty(menu.children)} ? 'nav-item' : 'nav-item dropdown'">
|
|
<a th:if="${#lists.isEmpty(menu.children)}"
|
|
th:class="${menu.active?'nav-line active':'nav-link '}"
|
|
th:href="@{${menu.menuHref}}" >
|
|
<div th:if="${menu.icon}">
|
|
<!-- 注意：用 utext 输出原始SVG -->
|
|
<span th:utext="${menu.icon}"></span>
|
|
</div>
|
|
<span class="nav-link-title" th:text="${menu.menuName}"></span>
|
|
</a>
|
|
<a th:if="${!#lists.isEmpty(menu.children)}"
|
|
class="nav-link dropdown-toggle"
|
|
href="#"
|
|
data-bs-toggle="dropdown"
|
|
data-bs-auto-close="false"
|
|
role="button"
|
|
aria-expanded="false">
|
|
<div th:if="${menu.icon}">
|
|
<!-- 注意：用 utext 输出原始SVG -->
|
|
<span th:utext="${menu.icon}"></span>
|
|
</div>
|
|
<span class="nav-link-title" th:text="${menu.menuName}"></span>
|
|
</a>
|
|
<div th:if="${!#lists.isEmpty(menu.children)}" th:class="${menu.active?'dropdown-menu show':'dropdown-menu'}">
|
|
<!-- 多列支持，可以根据需要拆分 -->
|
|
<div class="dropdown-menu-columns">
|
|
<div class="dropdown-menu-column">
|
|
<div th:each="child : ${menu.children}">
|
|
<!-- 如果有孙子菜单，用 dropend 包裹 -->
|
|
<div th:if="${!#lists.isEmpty(child.children)}" class="dropend">
|
|
<a class="dropdown-item dropdown-toggle"
|
|
href="#"
|
|
data-bs-toggle="dropdown"
|
|
data-bs-auto-close="false"
|
|
role="button"
|
|
aria-expanded="false"
|
|
th:text="${child.menuName}">
|
|
<div th:if="${child.icon}">
|
|
<!-- 注意：用 utext 输出原始SVG -->
|
|
<span th:utext="${child.icon}"></span>
|
|
</div>
|
|
</a>
|
|
<div th:class="${child.active?'dropdown-menu show':'dropdown-menu'}">
|
|
<div th:replace="fragments/menu :: menuColumn(${child.children})"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 否则直接链接 -->
|
|
<a th:if="${#lists.isEmpty(child.children)}"
|
|
class="dropdown-item"
|
|
th:href="@{${child.menuHref}}"
|
|
th:text="${child.menuName}">
|
|
<div th:if="${child.icon}">
|
|
<!-- 注意：用 utext 输出原始SVG -->
|
|
<span th:utext="${child.icon}"></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- 定义递归的多列片段 -->
|
|
<div th:fragment="menuColumn(menus)">
|
|
<div th:each="menu : ${menus}">
|
|
<div th:if="${!#lists.isEmpty(menu.children)}" class="dropend">
|
|
<a class="dropdown-item dropdown-toggle"
|
|
href="#"
|
|
data-bs-toggle="dropdown"
|
|
data-bs-auto-close="false"
|
|
role="button"
|
|
aria-expanded="false"
|
|
th:text="${menu.menuName}">
|
|
<div th:if="${child.icon}">
|
|
<!-- 注意：用 utext 输出原始SVG -->
|
|
<span th:utext="${child.icon}"></span>
|
|
</div>
|
|
</a>
|
|
<div th:class="${menu.active?'show dropdown-menu':'dropdown-menu'}">
|
|
<div th:replace="fragments/menu :: menuColumn(${menu.children})"></div>
|
|
</div>
|
|
</div>
|
|
<a th:if="${#lists.isEmpty(menu.children)}"
|
|
class="dropdown-item"
|
|
th:href="@{${menu.menuHref}}"
|
|
th:text="${menu.menuName}">
|
|
<div th:if="${child.icon}">
|
|
<!-- 注意：用 utext 输出原始SVG -->
|
|
<span th:utext="${child.icon}"></span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div> |