Web 组件

Titlebar 标题栏

标题栏组件，常用作页头、标题等。

目录

组件演示

default（文字标题）

栏目标题

<div data-wd-widget="titlebar" class="wd-titlebar wd-titlebar-default">
  <h2 class="wd-titlebar-title ">栏目标题</h2>
  <nav class="wd-titlebar-nav">
    <a href="#more" class="">more &raquo;</a>
  </nav>
</div>

default（图片标题）

<div data-wd-widget="titlebar" class="wd-titlebar wd-titlebar-default">
  <h2 class="wd-titlebar-title ">
    <img src="http://amazeui.b0.upaiyun.com/assets/i/brand/amazeui-b.png"
    />
  </h2>
  <nav class="wd-titlebar-nav">
    <a href="#more" class="">more &raquo;</a>
  </nav>
</div>

multi（单个链接）

栏目标题

<div data-wd-widget="titlebar" class="wd-titlebar wd-titlebar-multi">
  <h2 class="wd-titlebar-title ">栏目标题</h2>
  <nav class="wd-titlebar-nav">
    <a href="#more" class="">more &raquo;</a>
  </nav>
</div>

multi（多链接）

科技频道

<div data-wd-widget="titlebar" class="wd-titlebar wd-titlebar-multi">
  <h2 class="wd-titlebar-title ">科技频道</h2>
  <nav class="wd-titlebar-nav">
    <a href="#more-1" class="">手机</a>
    <a href="#more-2" class="">数码</a>
    <a href="#more-3" class="">影音</a>
  </nav>
</div>

cols（浅背景多链接）

栏目标题

<div data-wd-widget="titlebar" class="wd-titlebar wd-titlebar-cols">
  <h2 class="wd-titlebar-title ">
    <a href="#wtf" class="">栏目标题</a>
  </h2>
  <nav class="wd-titlebar-nav">
    <a href="#c1" class="">子栏目</a>
    <a href="#c2" class="">子栏目</a>
    <a href="#c3" class="">子栏目</a>
  </nav>
</div>

使用方法

直接使用

  • 拷贝演示中的代码，粘贴到 旺道UI HTML 模板（点此下载） <body> 区域；
  • 将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 titlebar，使用细节参照折叠面板组件。

云适配 WebIDE

  • 将组件拖入编辑界面；
  • 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。
var data = {
  "title": "",      // 主标题
  "link": "",       // 主标题链接，可选
  "nav": [          // 右侧附加链接，可以为多个
    {
      "link": "",
      "title": "",
      "className": ""
    }
  ]
};

return data;

数据接口 

{
  "id": "",

  "className": "",

  "theme": "",

  "options": null,

  "content": {
    "title": "",
    "link": "",
    "className": "",
    "nav": [
      {
        "link": "",
        "title": "",
        "className": ""
      }
    ]
  }
}