admui 框架源码模板结构

Posted 2022-02-24 admui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了admui 框架源码模板结构相关的知识，希望对你有一定的参考价值。

模板结构

一般情况下，模板的结构如下(具体代码见/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 框架源码模板结构的主要内容，如果未能解决你的问题，请参考以下文章

Python框架之Tornado (源码之褪去模板外衣)

快速开发框架，及库存管理系统，基于easyui框架和C#语言MVCEntityFrameWorkT4模板技术。

admui 框架源码 模板结构