工具栏 - SUI 移动开发UI库

返回介绍

工具栏

发布于 2017-06-10 字数 2543 浏览 1082 评论 0

底部导航,有图标和文字,响应鼠标事件和当前页面导航

工具栏

<nav class="bar bar-tab">
  <a class="tab-item external active" href="#">
    <span class="icon icon-home"></span>
    <span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-me"></span>
    <span class="tab-label">文案</span>
    <span class="badge">2</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-star"></span>
    <span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-cart"></span>
    <span class="tab-label">文案</span>
  </a>
  <a class="tab-item external" href="#">
    <span class="icon icon-settings"></span>
    <span class="tab-label">文案</span>
  </a>
</nav>

无图标,只有文案(文字)

<nav class="bar bar-tab">
    <a class="tab-item external active" href="#">文案</a>
    <a class="tab-item external" href="#">文案</a>
    <a class="tab-item external" href="#">文案</a>
</nav>

二级标题栏

工具栏

<nav class="bar bar-nav bar-standard">
  <h1 class="title">多级标题栏和工具栏</h1>
</nav>

<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-header-secondary">
  <button class="button button-block">Block level button</button>
</div>

<!-- Block button in standard bar fixed above the footer -->
<div class="bar bar-footer-secondary">
  <button class="button button-block">Block level button</button>
</div>

<!-- Icons in standard bar fixed to the bottom of the screen -->
<div class="bar bar-footer">
  <a class="icon icon-edit pull-left"></a>
  <a class="icon icon-settings pull-right"></a>
</div>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

目前还没有任何评论,快来抢沙发吧!