菜单配置
0.10.3
版本Xgen
管理页面上的菜单DSL
结构如下:
json
{
"items": [
{
"icon": "icon-gitlab",
"id": 1,
"name": "英雄管理",
"path": "/x/Table/hero",
"badge": 6,
"children": [
{
"id": 10001,
"name": "自由页面",
"path": "/x/Dashboard/test",
"badge": 16
}
]
}
],
"setting": [
{
"icon": "icon-book",
"id": 1,
"name": "通讯录",
"path": "/x/Table/book",
"badge": 100,
"children": [
{
"id": 10002,
"name": "通讯录",
"path": "/x/Table/book"
}
]
}
]
}
菜单可以设置嵌套显示,子菜单项配置在菜单项目的children
属性上。
json
{
"icon": "icon-gitlab",
"id": 1,
"name": "英雄管理",
"path": "/x/Table/hero",
"badge": 6,
"children": [
{
"id": 10001,
"name": "自由页面",
"path": "/x/Dashboard/test",
"icon": "icon-gitlab",
"badge": 16
}
]
}
菜单上显示未读数据
配置菜单项目的badge
属性。适用于主菜单与子菜单,在主菜单上,如果数量超过 100,会显示 99+。 有主菜单上显示红色,在子菜单上显示灰色。
json
{
"items": [
{
"icon": "icon-gitlab",
"id": 1,
"name": "英雄管理",
"path": "/x/Table/hero",
"badge": 6,
"children": [
{
"id": 10001,
"name": "自由页面",
"path": "/x/Dashboard/test",
"icon": "icon-gitlab",
"badge": 16
}
]
}
]
}
在菜单上显示未读提示
配置主菜单项目的dot
属性为true
,在图标的右上角显示一个小红点。
json
{
"icon": "icon-airplay",
"id": 3,
"name": "airplay",
"path": "/x/Form/hero/0/edit",
"dot": true
}
使用图标
如果不想使用图标也可以在icon
字段写上文本
feather icon
feather icon
以icon-
作为前缀。示例:
- icon-star
图标查找的网址:https://feathericons.com/
material design icon
图标支持以-filled
/-filled
样式作为后缀,示例:
star-filled
star-outline
图标查找地址:https://fonts.google.com/icons?icon.set=Material+Icons。