GridNav 宫格导航

宫格菜单导航,不支持配置初始化接口初始化数据域,所以需要搭配类似像ServiceFormCRUD这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过source属性,获取数据链中的数据,完成菜单展示。

基本用法

通过 source 关联上下文数据,或者通过 name 关联。

加载中,请稍后。。。

也可以静态展示,即不关联数据固定显示。

加载中,请稍后。。。

自定义列数

默认一行展示四个格子,可以通过 columnNum 自定义列数

加载中,请稍后。。。

正方形格子

设置 square 属性后,格子的高度会和宽度保持一致。

加载中,请稍后。。。

格子间距

通过 gutter 属性设置格子之间的距离。

加载中,请稍后。。。

内容横排

direction 属性设置为 horizontal,可以让宫格的内容呈横向排列。

加载中,请稍后。。。

图标占比

设置 iconRatio 可以控制图标宽度占比,默认 60%,设置 1-100 的数字。

加载中,请稍后。。。

角标提示

设置 badge 属性后,会在图标右上角展示相应的角标,支持红点、数字、彩带模式。

加载中,请稍后。。。

点击交互

设置 clickAction 属性支持通用点击交互,详见 Action 配置

加载中,请稍后。。。

属性表

属性名 类型 默认值 说明
type string grid-nav
className string 外层 CSS 类名
itemClassName string 列表项 css 类名
contentClassName string 列表项内容 css 类名
value Array<object> 图片数组
source string 数据源
square boolean 是否将列表项固定为正方形
center boolean true 是否将列表项内容居中显示
border boolean true 是否显示列表项边框
gutter number 列表项之间的间距,默认单位为px
reverse boolean 是否调换图标和文本的位置
iconRatio number 60 图标宽度占比,单位%
direction string vertical 列表项内容排列的方向,可选值为 horizontalvertical
columnNum number 4 列数
options.icon string 列表项图标
options.text string 列表项文案
options.badge BadgeSchema 列表项角标,详见 Badge
options.link string 内部页面路径或外部跳转 URL 地址,优先级高于 clickAction
options.blank boolean 是否新页面打开,link 为 url 时有效
options.clickAction ActionSchema 列表项点击交互 详见 Action