跳到主要内容

宫格导航

适用场景#

用于宫格布局样式下的导航项目展示。

基础能力说明#

  1. 支持灵活定义各个导航项目的图标文字内容、跳转交互逻辑

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

属性介绍#

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

属性名
属性标识
类型
属性分组
默认值
说明
导航设置navOptionarray基础属性[{"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}基础属性4PC端每行导航列数
icon尺寸iconSize{"label":"小","value":"small"}|{"label":"中","value":"medium"}|{"label":"大","value":"big"}基础属性"medium"-
字重fontWeight{"label":"细","value":"lighter"}|{"label":"正常","value":"normal"}|{"label":"粗","value":"bolder"}高级属性"normal"标题字重
字号fontSizenumber高级属性14标题字号
标题颜色textColorstring高级属性"rgb(0, 0, 0)"-
行高lineHeightstring高级属性"auto"标题行高
标题行数maxLinesnumber高级属性1-
展示文本气泡tipsboolean高级属性true开启后鼠标悬停在文本组件上会展示文本气泡

事件介绍#