首页产品列表产品详情
2

框架简介

使用AX框架自身的组件可以自由创建多种风格的管理系统框架，理论上来说可以创建任意的带菜单的页面，包含不限于：API接口文档，产品手册，管理系统，网站地图等。

下载DEMO

为了方便用户学习和使用，本页面已经打包。点击下载

使用方法

在引入ax.css和ax.js之后，接着引入ax-admin01.css和ax-admin01.js即可。

框架布局

  • 布局上使用ax-flex-row做横向弹性布局，使用ax-flex-col做纵向弹性布局。详细请见Layout布局。
  • 风格上使用的样式类主要包括：ax-admin，ax-body，ax-header-search，ax-header-icons，ax-header-user，ax-nav-main，ax-aside-header，ax-aside-main，ax-aside-footer等。

框架特点

  • 支持对左侧菜单使用cookie，包括缩小到图标和全部隐藏。如取消请删除ax-admin01.js中相应代码。
  • 支持对右侧窗口使用cookie。如取消请删除ax-admin.js中相应代码。
  • 适配了移动端，包括手机和平板。
  • 集成了AX框架的menu菜单(使用详细)，面包屑路径(使用详细)，Popup弹窗(使用详细)。

标准结构

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class="ax-flex-row ax-admin">
    <!--nav-->
    <nav class="ax-flex-col">
        ...
    </nav>
    <div class="ax-flex-block ax-body">
        <div class="ax-flex-col">
            <!--header-->
            <header class="ax-flex-row">
                ...
            </header>
            <!--main-->
            <main class="ax-flex-block">
                ...
            </main>
            <!--footer-->
            <footer>
                ...
            </footer>
        </div>
    </div>
    <!--aside-->
    <aside class="ax-flex-col">
        ...
    </aside>
</div>
</body>
</html>