宫格导航
适用场景#
用于宫格布局样式下的导航项目展示。
基础能力说明#
支持灵活定义各个导航项目的图标文字内容、跳转交互逻辑
提供各类样式属性，支持 PC/移动多端列数和细致的样式效果
属性介绍#
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
|---|
| 导航设置 | navOption | array | 基础属性 | [{"icon":"自定义图片","iconSrc":"https://qcloudimg.tencent-cloud.cn/raw/82b92ea0caf05f372f3432bd44764f0a.png","title":"导航标题","tapStatus":"tap"},{"icon":"自定义图片","iconSrc":"https://qcloudimg.tencent-cloud.cn/raw/fe54a986a821473655ba20afe30a543a.png","title":"导航标题","tapStatus":"tap"},{"icon":"自定义图片","iconSrc":"https://qcloudimg.tencent-cloud.cn/raw/12a888a3abe20890894ccf6e73a9eb06.png","title":"导航标题","tapStatus":"tap"},{"icon":"自定义图片","iconSrc":"https://qcloudimg.tencent-cloud.cn/raw/8330f8833919254e6b779fb543a53e39.png","title":"导航标题","tapStatus":"tap"}] | 配置宫格导航的详细内容。属性变量可hover到属性标题进行查看。补充属性说明：点击时(tapStatus):无行为(tap)/打开页面(inside)/外部链接(outer);参数(params):[{key:***,value:***}] |
| 移动端列数 | mobileCol | {"label":"3","value":3}|{"label":"4","value":4}|{"label":"5","value":5} | 基础属性 | 4 | 移动端每行导航列数 |
| PC端列数 | pcCol | {"label":"3","value":3}|{"label":"4","value":4}|{"label":"5","value":5}|{"label":"6","value":6} | 基础属性 | 4 | PC端每行导航列数 |
| icon尺寸 | iconSize | {"label":"小","value":"small"}|{"label":"中","value":"medium"}|{"label":"大","value":"big"} | 基础属性 | "medium" | - |
| 字重 | fontWeight | {"label":"细","value":"lighter"}|{"label":"正常","value":"normal"}|{"label":"粗","value":"bolder"} | 高级属性 | "normal" | 标题字重 |
| 字号 | fontSize | number | 高级属性 | 14 | 标题字号 |
| 标题颜色 | textColor | string | 高级属性 | "rgb(0, 0, 0)" | - |
| 行高 | lineHeight | string | 高级属性 | "auto" | 标题行高 |
| 标题行数 | maxLines | number | 高级属性 | 1 | - |
| 展示文本气泡 | tips | boolean | 高级属性 | true | 开启后鼠标悬停在文本组件上会展示文本气泡 |