宫格导航
#
适用场景用于宫格布局样式下的导航项目展示。
#
基础能力说明支持灵活定义各个导航项目的图标文字内容、跳转交互逻辑
提供各类样式属性,支持 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 | 开启后鼠标悬停在文本组件上会展示文本气泡 |