Navbar 工具栏
底部工具栏组件。
组件演示
default（字体图标）
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "
id="">
<ul class="am-navbar-nav am-cf sm-block-grid-4">
<li>
<a href="tel:123456789">
<span class="am-icon-phone"></span>
<span class="am-navbar-label">呼叫</span>
</a>
</li>
<li data-am-navbar-share>
<a href="###">
<span class="am-icon-share-square-o"></span>
<span class="am-navbar-label">分享</span>
</a>
</li>
<li data-am-navbar-qrcode>
<a href="###">
<span class="am-icon-qrcode"></span>
<span class="am-navbar-label">二维码</span>
</a>
</li>
<li>
<a href="https://github.com/allmobilize/amazeui">
<span class="am-icon-github"></span>
<span class="am-navbar-label">GitHub</span>
</a>
</li>
<li>
<a href="http://amazeui.org/getting-started">
<span class="am-icon-download"></span>
<span class="am-navbar-label">下载使用</span>
</a>
</li>
<li>
<a href="https://github.com/allmobilize/amazeui/issues">
<span class="am-icon-location-arrow"></span>
<span class="am-navbar-label">Bug 反馈</span>
</a>
</li>
</ul>
</div>default（自定义图标）
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default "
id="">
<ul class="am-navbar-nav am-cf sm-block-grid-4">
<li>
<a href="sms:18601860186?body=约吗？">
<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">
<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="###">
<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">
<img src="http://amazeui.b0.upaiyun.com/assets/i/cpts/navbar/map.png"
alt="地图" />
<span class="am-navbar-label">地图</span>
</a>
</li>
</ul>
</div>使用方法
直接使用
- 拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载）
<body>区域； - 将示例代码中的内容替换为自己的内容。
使用 Handlebars
本组件 Handlebars partial 名称为 navbar，使用细节参照折叠面板组件。
云适配 WebIDE
- 将组件拖入编辑界面；
- 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。
var data = [
{
"title": "", // title 值：要显示的文本
"link": "", // link 值 ：如果是电话则写"tel:0101245678"
"customIcon": "", // customIcon与下边的icon选用其中之一，customIcon用于上传自定义的小图标，写法："customIcon": context.__root + "xxx.png"
"icon": "", //icon 值,例如：分享的图标在AMUI中是am-icon-share ，则此时的icon写法为： "icon": "share"
"dataApi": "" //dataApi 值可以填写"data-am-navbar-share"（用于分享模块） 或者"data-am-navbar-qrcode"(用于二维码模块)。若要使用自己上传的二维码 'data-am-navbar-qrcode = 二维码地址' 即可
}
];
return data;
数据接口
{
"id": "",
"className": "",
"theme": "default",
"options": {
"cols": "", //cols 值 ：列数，若数据列数较多，会自动添加一个列表
},
"content": [
{
"title": "", // title 值：要显示的文本
"link": "", // link 值 ：链接地址，电话则写"tel:0101245678"
"customIcon": "", // customIcon与icon选用其中之一，customIcon用于上传的小图标/ 写法： "customIcon": "xxx.png"
"icon": "",//icon 值：使用icon font 例如：分享的图标 am-icon-share ，icon写法： "icon": "share" ,更多的查看amui icon 目录下
"dataApi": ""//dataApi 值为 data-am-navbar-share（用于分享模块） 或者 data-am-navbar-qrcode(用于二维码模块) 若使用自己上传的二维码 'data-am-navbar-qrcode = 二维码地址' 即可
}
]
}
