Figure 单张图片
Figure 组件，用于放置单张图片。多图请使用 Gallery。
组件演示
default（灰色边框）
<figure data-am-widget="figure" class="am am-figure am-figure-default " data-am-figure="{ pureview: 'true' }">
<img src="http://amazeui.shopxo.net/static/images/007.jpg" data-rel="http://amazeui.shopxo.net/static/images/001.jpg" alt="春天的花开秋天的风以及冬天的落阳"/>
<figcaption class="am-figure-capition-btm">
春天的花开秋天的风以及冬天的落阳
</figcaption>
</figure>
使用方法
直接使用
- 拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载）
<body>区域； - 将示例代码中的内容替换为自己的内容。
使用 Handlebars
本组件 Handlebars partial 名称为 figure，使用细节参照折叠面板组件。
云适配 WebIDE
- 将组件拖入编辑界面；
- 点击右侧面板里的【数据采集】按钮，按以下格式采集数据。
var data = {
"img": "", // 图片的路径
"imgAlt": "", // 图片描述，可访性和 SEO 用途，原网站图片的alt属性，如果alt为空或者不填写这项，则调用 figcaption
"figcaption": "" // 图片标题，显示在图标下方，这里的imgalt和figcaption选择一个填写就可以了
};
return data;数据接口
如果觉得图片体积太大耗费流量，可以 img 里传缩略图， rel 里传大图地址。
{
"id": "",
"className": "",
"theme": "",
"options": {
"figcaptionPosition": "bottom", // 图标标题位置 top - 图片上方， bottom - 图片下方
"zoomble": false // 是否启用图片缩放功能 ['auto'|true|false]
// 'auto' - 根据图片宽度自动判断，图大宽度大于窗口宽度时开启，否则不开启
// false 不开启；其他转型后非 false 的值，开启
// 此选项会作为 pureview 选项值 data-am-figure="{pureview: {{zoomable}} }"
},
"content": [
{
"img": "", // 图片（缩略图）路径
"rel": "", // 大图路径
"imgAlt": "", // 图片alt描述，如果为空则读取 figcaption
"figcaption": "" // 图片标题
}
]
}