MUI学习02-顶部导航栏

Posted 2020-10-12 不见花落

建议：先看一下MUI注意事项

连接：http://ask.dcloud.net.cn/article/122

---

固定栏靠前

所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；

常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）

元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；

---

顶部导航栏（.mui-bar-nav）

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <a class="mui-action-back mui-icon mui-icon-home mui-pull-right mui-a-color"></a>
    <h1 class="mui-title">实时监控</h1>
</header>