Amaze UI

Web 组件

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.p2hp.com/static/images/007.jpg" data-rel="http://amazeui.p2hp.com/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": "" // 图片标题
    }
  ]
}
侧栏导航
Amaze UI 微信
在微信上关注我们