MUI学习01-顶部导航栏

时间:2024-03-12 16:09:45

建议:先看一下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>

效果如下: