Titlebar 标题栏
标题栏组件，常用作页头、标题等。
目录
组件演示
default（文字标题）
<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
<h2 class="am-titlebar-title">栏目标题</h2>
<nav class="am-titlebar-nav">
<a href="#more" class="">more »</a>
</nav>
</div>default（图片标题）
<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default">
<h2 class="am-titlebar-title">
<img src="http://amazeui.b0.upaiyun.com/assets/i/brand/amazeui-b.png"
/>
</h2>
<nav class="am-titlebar-nav">
<a href="#more" class="">more »</a>
</nav>
</div>multi（单个链接）
<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi">
<h2 class="am-titlebar-title">栏目标题</h2>
<nav class="am-titlebar-nav">
<a href="#more" class="">more »</a>
</nav>
</div>multi（多链接）
<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi">
<h2 class="am-titlebar-title">科技频道</h2>
<nav class="am-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-am-widget="titlebar" class="am-titlebar am-titlebar-cols">
<h2 class="am-titlebar-title">
<a href="#wtf">栏目标题</a>
</h2>
<nav class="am-titlebar-nav">
<a href="#c1" class="">子栏目</a>
<a href="#c2" class="">子栏目</a>
<a href="#c3" class="">子栏目</a>
</nav>
</div>使用方法
直接使用
- 拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载）
<body>区域； - 将示例代码中的内容替换为自己的内容。
使用 Handlebars
本组件 Handlebars partial 名称为 titlebar，使用细节参照折叠面板组件。
云适配 WebIDE
- 将组件拖入编辑界面；
- 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。
Amaze UI 1.0
var data = {
"title": "", // 主标题
"link": "", // 主标题链接，可选
"nav": [ // 右侧附加链接，可以为多个
{
"link": "",
"title": "",
"className": ""
}
]
};
return data;
Amaze UI 0.9
var data = {
// 以下三项，可任意组合
"left": "", // Titlebar 左侧，可写 html 标签（可选）
"title": "", // Titlebar 中部，可写 html 标签（可选）
"right": "" // Titlebar 右侧，可写 html 标签（可选）
};
return data;
数据接口
Amaze UI 1.0
{
"id": "",
"className": "",
"theme": "",
"options": null,
"content": {
"title": "",
"link": "",
"nav": [
{
"link": "",
"title": "",
"className": ""
}
]
}
}
Amaze UI 0.9
{
"id": "",
"className": "",
"theme": "",
"options": null,
"content": {
"left": "",
"title": "",
"right": ""
}
}
