模板结构
一般情况下，模板的结构如下(具体代码见/html/index.html或/src/templates/pages/index.html)。
代码片段
头部(.site-navbar)
<nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> <div class="navbar-header"> ...... </div> <div class="navbar-container container-fluid"> ...... </div></nav> |
内容(.site-page)
<main class="site-page"> <div class="page-container" id="admui-pageContent"> ...... </div> <div class="page-loading vertical-align text-center"> <div class="page-loader loader-default loader vertical-align-middle" data-type="default"></div> </div></main> |
菜单(.site-menubar)
如果您使用不同的主题，.site-menubar的内容可能会有所不同
<nav class="site-menubar"> <div class="site-menubar-body"> <div class="tab-content h-full" id="admui-navTabs"> <div class="tab-pane animation-fade h-full active" id="admui-navTabsItem-2" role="tabpanel"> <ul class="site-menu"> <li class="site-menu-category">二级菜单</li> <li class="site-menu-item has-sub"> <a href="javascript:;"> <i class="site-menu-icon fa-bars" aria-hidden="true"></i><span class="site-menu-title">三级菜单</span><span class="site-menu-arrow"></span> </a> <ul class="site-menu-sub"> <li class="site-menu-item"> <a class="animsition-link" href="/examples/menu.html"> <span class="site-menu-title">四级菜单</span> </a> </li> <li class="site-menu-item has-sub"> <a href="javascript:;"> <span class="site-menu-title">四级菜单</span><span class="site-menu-arrow"></span> </a> <ul class="site-menu-sub"> <li class="site-menu-item"> <a class="animsition-link" href="/examples/menu.html"> <span class="site-menu-title">五级菜单</span> </a> </li> ...... </ul> </li> ...... </ul> </li> ...... </ul> </div> ...... </div> ...... </div></nav> |
如果算上导航条，Admui 共支持5级菜单。
布局相关
Admui包含了几种可选布局：
默认布局
默认布局提供快速响应的菜单栏，在页面 js 未加载完成时，您可以在<html>标签上添加class="css-menubar"来调用菜单样式。
<html class="no-js css-menubar" lang="zh-cn"> ......</html> |
菜单折叠
如果您需要菜单默认是折叠的，您需要移除<html>标签上的class="css-menubar"，同时在<body>标签上添加class="site-menubar-fold site-menubar-keep"。示例代码如下：
<body class="site-menubar-fold site-menubar-keep" data-auto-menubar="false"> ......</body> |
菜单展开
如果您需要菜单默认是展开的，您需要移除<html>标签上的class="css-menubar"，同时在<body>标签上添加class="site-menubar-unfold site-menubar-keep"。示例代码如下：
<body class="site-menubar-unfold site-menubar-keep"> ......</body> |
使用标签页
如果需要使用标签页，请在<body>标签上添加class="site-contabs-open"。示例代码如下：
<body class="site-contabs-open"> ......</body> |
原文地址：https://www.cnblogs.com/admui/p/11106925.html
时间： 2024-10-17 03:25:37