YaoDocs

外观

导航栏

菜单配置 ​

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。