宫格导航
NavLayout
适用场景
用于宫格布局样式下的导航项目展示。
基础能力说明
支持灵活定义各个导航项目的图标文字内容、跳转交互逻辑
提供各类样式属性，支持 PC/移动多端列数和细致的样式效果
属性介绍
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
|---|
| 导航设置 | navOption | array | 配置宫格导航的详细内容。属性变量可hover到属性标题进行查看。补充属性说明：点击时(tapStatus):无行为(tap)/打开页面(inside)/外部链接(outer);参数(params):[{key:***,value:***}] 示例：[ { "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" } ] |
| 移动端列数 | mobileCol | number | 移动端每行导航列数 示例：4 |
| PC端列数 | pcCol | number | PC端每行导航列数 示例：4 |
| icon尺寸 | iconSize | string | 示例："medium" |
| 字重 | fontWeight | string | 标题字重 示例："normal" |
| 字号 | fontSize | number | 标题字号 示例：14 |
| 标题颜色 | textColor | string | 示例："rgb(0, 0, 0)" |
| 行高 | lineHeight | string | 标题行高 示例："auto" |
| 标题行数 | maxLines | number | 示例：1 |
| 展示文本气泡 | tips | boolean | 开启后鼠标悬停在文本组件上会展示文本气泡 示例：true |