图文卡片
适用场景#
以卡片形式展示包含图片、标题、描述信息在内的列表信息。
基础能力说明#
支持灵活定义各个卡片的图片内容、跳转交互逻辑
提供各类样式属性，支持 PC/移动多端列数和细致的样式效果
属性介绍#
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
|---|
| 图文内容 | navOption | array | 基础属性 | [{"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} | 基础属性 | 4 | PC端每行卡片列数 |
| 对齐 | textAlign | string | 高级属性 | "left" | 单个卡片中图片、标题、描述、按钮的对齐方式 |
| 图片高度 | iconHeightSize | string | 高级属性 | "100%" | - |
| 图片宽度 | iconWidthSize | string | 高级属性 | "100%" | 默认单位px |
| 显示标题 | titleVisible | boolean | 高级属性 | true | - |
| 标题颜色 | titleColor | string | 高级属性 | "rgb(0, 0, 0)" | - |
| 标题字重 | titleFontWeight | {"label":"细","value":"lighter"}|{"label":"正常","value":"normal"}|{"label":"粗","value":"bolder"} | 高级属性 | "bolder" | - |
| 标题字号 | titleFontSize | number | 高级属性 | 14 | - |
| 标题行高 | titleLineHeight | string | 高级属性 | "auto" | - |
| 标题行数 | titleMaxLines | number | 高级属性 | 1 | - |
| 显示描述 | desVisible | boolean | 高级属性 | true | - |
| 描述颜色 | desColor | string | 高级属性 | "rgba(0, 0, 0, 0.4)" | - |
| 描述字重 | desFontWeight | {"label":"细","value":"lighter"}|{"label":"正常","value":"normal"}|{"label":"粗","value":"bolder"} | 高级属性 | "normal" | - |
| 描述字号 | desFontSize | number | 高级属性 | 14 | - |
| 描述行高 | desLineHeight | string | 高级属性 | "auto" | - |
| 描述行数 | desMaxLines | number | 高级属性 | 2 | - |
| 显示详情按钮 | buttonVisible | boolean | 高级属性 | true | 无行为的按钮将保持隐藏 |
| 展示文本气泡 | tips | boolean | 高级属性 | true | 开启后鼠标悬停在文本组件上会展示文本气泡 |
| 按钮文案 | buttonText | string | 高级属性 | "查看详情" | - |