跳到主要内容

图文展示项

适用场景#

用于构建图片+标题文字的内容展示效果

基础能力说明#

  1. 提供图片、标题等各类属性,实现对组件内容和样式的配置。
  2. 通过「子标题」属性,可快捷配置出内容标签样式

扩展场景说明#

组件内容插槽#

开启自定义内容、自定义媒体属性后,在组件插槽中放入图片、视频、按钮、文字等组件,可构建更为灵活的图文布局样式

属性介绍#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
媒体地址mediaUrlstring基础属性"https://main.qcloudimg.com/raw/d9fe2045658211eeb3ad60edca3102a8.png"更改组件展示的图片
媒体尺寸thumbSizenumber基础属性100更改展示的图片尺寸大小
媒体与文本对齐方式align{"label":"顶部","value":"flex-start"}|{"label":"底部","value":"flex-end"}|{"label":"居中","value":"center"}基础属性"flex-start"更改图片在组件中的纵向排列方式
标题titlestring基础属性"标题"更改组件主标题的文本内容
子标题subtitlestring基础属性"子标题"更改组件子标题的文本内容
子标题类型subtitleType{"label":"默认","value":"raw"}|{"label":"标签","value":"label"}基础属性"raw"默认: 以文本样式展示子标题内容;标签: 以微搭内置的标签样式展示子标题内容
内容contentstring基础属性"消息内容"更改组件的正文展示内容
媒体置于右侧reverseboolean高级属性false开启后将会更改组件图片的水平排列方式至组件右侧
自定义媒体isCustomMediaboolean高级属性false开启后,将会隐藏组件原本的图片配置,同时对组件内容插槽下的内容进行展示
自定义内容isCustomContentboolean高级属性false开启后,将会隐藏组件原本的主子标题配置,同时对组件主内容插槽下的内容进行展示

事件介绍#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击tap兼容三端-