admui 框架源码模板结构

时间：2019-06-29 16:32:26 阅读：155 评论：0 收藏：0 [点我收藏+]

标签：cti text div keep vertica vba fixed hid bpa

模板结构

一般情况下，模板的结构如下(具体代码见/html/index.html或/src/templates/pages/index.html)。

代码片段

<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>

admui 框架源码模板结构

标签：cti text div keep vertica vba fixed hid bpa

原文地址：https://www.cnblogs.com/admui/p/11106925.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

admui 框架源码 模板结构

模板结构

代码片段

头部(.site-navbar)

内容(.site-page)

菜单(.site-menubar)

布局相关

默认布局

菜单折叠

菜单展开

使用标签页

admui 框架源码模板结构