Navbar 工具栏
This widget helps create navbars at the bottom of the viewport.
TOC
Demos
Theme: default
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "
id="">
<ul class="am-navbar-nav am-cf am-avg-sm-4">
<li >
<a href="tel:123456789" class="">
<span class="am-icon-phone"></span>
<span class="am-navbar-label">呼叫</span>
</a>
</li>
<li data-am-navbar-share>
<a href="###" class="">
<span class="am-icon-share-square-o"></span>
<span class="am-navbar-label">分享</span>
</a>
</li>
<li data-am-navbar-qrcode>
<a href="###" class="">
<span class="am-icon-qrcode"></span>
<span class="am-navbar-label">二维码</span>
</a>
</li>
<li >
<a href="https://github.com/amazeui/amazeui" class="">
<span class="am-icon-github"></span>
<span class="am-navbar-label">GitHub</span>
</a>
</li>
<li >
<a href="https://amazeui.github.io/getting-started" class="">
<span class="am-icon-download"></span>
<span class="am-navbar-label">下载使用</span>
</a>
</li>
<li >
<a href="https://github.com/amazeui/amazeui/issues" class="">
<span class="am-icon-location-arrow"></span>
<span class="am-navbar-label">Bug 反馈</span>
</a>
</li>
</ul>
</div>
Theme: default
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "
id="">
<ul class="am-navbar-nav am-cf am-avg-sm-4">
<li >
<a href="sms:18601860186?body=约吗？" class="">
<img src="http://amazeui.b0.upaiyun.com/assets/i/cpts/navbar/Information.png" alt="消息"/>
<span class="am-navbar-label">消息</span>
</a>
</li>
<li >
<a href="tel:18601860186" class="">
<img src="http://amazeui.b0.upaiyun.com/assets/i/cpts/navbar/phone.png" alt="呼叫"/>
<span class="am-navbar-label">呼叫</span>
</a>
</li>
<li data-am-navbar-share>
<a href="###" class="">
<img src="http://amazeui.b0.upaiyun.com/assets/i/cpts/navbar/share.png" alt="分享"/>
<span class="am-navbar-label">分享</span>
</a>
</li>
<li >
<a href="http://yunshipei.com" class="">
<img src="http://amazeui.b0.upaiyun.com/assets/i/cpts/navbar/map.png" alt="地图"/>
<span class="am-navbar-label">地图</span>
</a>
</li>
</ul>
</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 navbar. 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: text that shown in the navbar
"link": "", // link: Link of icon. Use "tel: ***-****-***" for phone number.
"customIcon": "", // Only one of customIcon and icon will be applied, so please don't use them at the same time. CustomIcon is used to upload icons. Usage: "customIcon": context.__root + "xxx.png"
"icon": "", //icon. For example: The share icon is am-icon-share in amaze UI, so use "icon": "share" here to use share icon.
"dataApi": "" //dataApi can be "data-am-navbar-share"( For share module) or "data-am-navbar-qrcode"( For qrcode module). Use 'data-am-navbar-qrcode = YourQRCodeURL' for your own qrcode.
}
];
return data;Data Binding
{
"id": "",
"className": "",
"theme": "default",
"options": {
"cols": "", //cols: The number of columns. If the actual columns is more than this value, a list will be added autometically.
},
"content": [
{
"title": "", // title: text that shown in the navbar
"link": "", // link: Link of icon. Use "tel: ***-****-***" for phone number.
"customIcon": "", // Only one of customIcon and icon will be applied, so please don't use them at the same time. CustomIcon is used to upload icons. Usage: "customIcon": context.__root + "xxx.png"
"icon": "", //icon. For example: The share icon is am-icon-share in amaze UI, so use "icon": "share" here to use share icon.
"dataApi": "" //dataApi can be "data-am-navbar-share"( For share module) or "data-am-navbar-qrcode"( For qrcode module). Use 'data-am-navbar-qrcode = YourQRCodeURL' for your own qrcode.
}
]
}