Titlebar
This widget can be used as header or title.
TOC
Demos
Theme: 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>
Theme: default
<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" >
<h2 class="am-titlebar-title ">
<img src="https://amazeui.github.io/media/i/brand/amazeui-b.png"/>
</h2>
<nav class="am-titlebar-nav">
<a href="#more" class="">more »</a>
</nav>
</div>
Theme: 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>
Theme: 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>
Theme: cols
<div data-am-widget="titlebar" class="am-titlebar am-titlebar-cols" >
<h2 class="am-titlebar-title ">
<a href="#wtf" class="">栏目标题</a>
</h2>
<nav class="am-titlebar-nav">
<a href="#c1" class="">子栏目</a>
<a href="#c2" class="">子栏目</a>
<a href="#c3" class="">子栏目</a>
</nav>
</div>
Usage
Copy and Paste
- Copy the codes in examples, and paste it to the
<body>of the Amaze UI HTML template(Download); - Replace the contents in examples with your own contents.
Using Handlebars
The Handlebars partial of this widget is titlebar. See Accordion for more details.
Allmobilize WebIDE
- Drag the widget to the edit interface;
- Click the
Data bindingbutton on the right panel, and bind data using following format.
var data = {
"title": "", // Title
"link": "", // Title link. Optional
"nav": [ // Additional links.
{
"link": "",
"title": "",
"className": ""
}
]
};
return data;Data Binding
{
"id": "",
"className": "",
"theme": "",
"options": null,
"content": {
"title": "",
"link": "",
"className": "",
"nav": [
{
"link": "",
"title": "",
"className": ""
}
]
}
}