跳到主要内容

图文卡片

适用场景#

以卡片形式展示包含图片、标题、描述信息在内的列表信息。

基础能力说明#

  1. 支持灵活定义各个卡片的图片内容、跳转交互逻辑

  2. 提供各类样式属性,支持 PC/移动多端列数和细致的样式效果

属性介绍#

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

属性名
属性标识
类型
属性分组
默认值
说明
图文内容navOptionarray基础属性[{"icon":"https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png","title":"示例标题","des":"这是一段示例描述,这是一段示例描述","tapStatus":"tap"},{"icon":"https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png","title":"示例标题","des":"这是一段示例描述,这是一段示例描述","tapStatus":"tap"},{"icon":"https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png","title":"示例标题","des":"这是一段示例描述,这是一段示例描述","tapStatus":"tap"},{"icon":"https://qcloudimg.tencent-cloud.cn/raw/478c35e469057b4d6352ccc14e00ebc5.png","title":"示例标题","des":"这是一段示例描述,这是一段示例描述","tapStatus":"tap"}]配置图文卡片的详细内容。属性变量可hover到属性标题进行查看。补充属性说明:点击时(tapStatus):无行为(tap)/打开页面(inside)/外部链接(outer);参数(params):[{key:***,value:***}]
移动端列数ColMobile{"label":"1","value":1}|{"label":"2","value":2}基础属性2移动端每行卡片列数
PC端列数ColPC{"label":"3","value":3}|{"label":"4","value":4}基础属性4PC端每行卡片列数
对齐textAlignstring高级属性"left"单个卡片中图片、标题、描述、按钮的对齐方式
图片高度iconHeightSizestring高级属性"100%"-
图片宽度iconWidthSizestring高级属性"100%"默认单位px
显示标题titleVisibleboolean高级属性true-
标题颜色titleColorstring高级属性"rgb(0, 0, 0)"-
标题字重titleFontWeight{"label":"细","value":"lighter"}|{"label":"正常","value":"normal"}|{"label":"粗","value":"bolder"}高级属性"bolder"-
标题字号titleFontSizenumber高级属性14-
标题行高titleLineHeightstring高级属性"auto"-
标题行数titleMaxLinesnumber高级属性1-
显示描述desVisibleboolean高级属性true-
描述颜色desColorstring高级属性"rgba(0, 0, 0, 0.4)"-
描述字重desFontWeight{"label":"细","value":"lighter"}|{"label":"正常","value":"normal"}|{"label":"粗","value":"bolder"}高级属性"normal"-
描述字号desFontSizenumber高级属性14-
描述行高desLineHeightstring高级属性"auto"-
描述行数desMaxLinesnumber高级属性2-
显示详情按钮buttonVisibleboolean高级属性true无行为的按钮将保持隐藏
展示文本气泡tipsboolean高级属性true开启后鼠标悬停在文本组件上会展示文本气泡
按钮文案buttonTextstring高级属性"查看详情"-

事件介绍#