Figure 单张图片
Figure 组件，用于放置单张图片。多图请使用 Gallery。
组件演示
default（灰色边框）
<figure data-am-widget="figure" class="am am-figure am-figure-default "
data-am-figure="{ pureview: 'auto' }">
<img src="/Amaze/1.x/assets/i/docs/timg.jpg" data-rel="/Amaze/1.x/assets/i/docs/timg.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]
},
"content": [
{
"img": "", // 图片（缩略图）路径
"rel": "", // 大图路径
"imgAlt": "", // 图片 alt 描述，如果为空则读取 figcaption
"figcaption": "" // 图片标题
}
]
}
