宫格菜单导航,不支持配置初始化接口初始化数据域,所以需要搭配类似像Service
、Form
或CRUD
这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过source
属性,获取数据链中的数据,完成菜单展示。
通过 source 关联上下文数据,或者通过 name 关联。
也可以静态展示,即不关联数据固定显示。
设置 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 |
列表项内容排列的方向,可选值为 horizontal 、vertical |
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 |