GridNav 宫格导航

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

基本用法

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

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "items": [
  5.           {
  6.             "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  7.             "text": "导航1"
  8.           },
  9.           {
  10.             "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  11.             "text": "导航2"
  12.           },
  13.           {
  14.             "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  15.             "text": "导航3"
  16.           },
  17.           {
  18.             "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  19.             "text": "导航4"
  20.           }
  21.         ]
  22.     },
  23.     "body": [
  24.         {
  25.             "type": "grid-nav",
  26.             "source": "${items}"
  27.         },
  28.         {
  29.             "type": "divider"
  30.         },
  31.         {
  32.             "type": "grid-nav",
  33.             "name": "items"
  34.         }
  35.     ]
  36. }

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

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "grid-nav",
  5.         "options": [
  6.             {
  7.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  8.                 "text": "导航1"
  9.             },
  10.             {
  11.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  12.                 "text": "导航2"
  13.             },
  14.             {
  15.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  16.                 "text": "导航3"
  17.             },
  18.             {
  19.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  20.                 "text": "导航4"
  21.             }
  22.         ]
  23.     }
  24. }

自定义列数

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

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "items": [
  5.             {
  6.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  7.                 "text": "导航1"
  8.             },
  9.             {
  10.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  11.                 "text": "导航2"
  12.             },
  13.             {
  14.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  15.                 "text": "导航3"
  16.             }
  17.         ]
  18.     },
  19.     "body": {
  20.         "type": "grid-nav",
  21.         "columnNum": 3,
  22.         "source": "${items}"
  23.     }
  24. }

正方形格子

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

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "items": [
  5.             {
  6.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  7.                 "text": "导航1"
  8.             },
  9.             {
  10.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  11.                 "text": "导航2"
  12.             },
  13.             {
  14.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  15.                 "text": "导航3"
  16.             },
  17.             {
  18.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  19.                 "text": "导航4"
  20.             }
  21.         ]
  22.     },
  23.     "body": {
  24.         "type": "grid-nav",
  25.         "source": "${items}",
  26.         "square": true
  27.     }
  28. }

格子间距

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

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "items": [
  5.             {
  6.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  7.                 "text": "导航1"
  8.             },
  9.             {
  10.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  11.                 "text": "导航2"
  12.             },
  13.             {
  14.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  15.                 "text": "导航3"
  16.             },
  17.             {
  18.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  19.                 "text": "导航4"
  20.             }
  21.         ]
  22.     },
  23.     "body": {
  24.         "type": "grid-nav",
  25.         "source": "${items}",
  26.         "gutter": 20
  27.     }
  28. }

内容横排

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

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "items": [
  5.             {
  6.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  7.                 "text": "导航1"
  8.             },
  9.             {
  10.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  11.                 "text": "导航2"
  12.             },
  13.             {
  14.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  15.                 "text": "导航3"
  16.             },
  17.             {
  18.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  19.                 "text": "导航4"
  20.             }
  21.         ]
  22.     },
  23.     "body": {
  24.         "type": "grid-nav",
  25.         "direction": "horizontal",
  26.         "source": "${items}"
  27.     }
  28. }

图标占比

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

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "items": [
  5.             {
  6.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  7.                 "text": "导航1"
  8.             },
  9.             {
  10.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  11.                 "text": "导航2"
  12.             },
  13.             {
  14.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  15.                 "text": "导航3"
  16.             },
  17.             {
  18.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  19.                 "text": "导航4"
  20.             }
  21.         ]
  22.     },
  23.     "body": {
  24.         "type": "grid-nav",
  25.         "iconRatio": "40",
  26.         "source": "${items}"
  27.     }
  28. }

角标提示

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

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "items": [
  5.             {
  6.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  7.                 "text": "导航1",
  8.                 "badge": {
  9.                     "mode": "text",
  10.                     "text": "10"
  11.                 }
  12.             },
  13.             {
  14.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  15.                 "text": "导航2",
  16.                 "badge": {
  17.                     "mode": "dot"
  18.                 }
  19.             },
  20.             {
  21.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  22.                 "text": "导航3",
  23.                 "badge": {
  24.                     "mode": "ribbon",
  25.                     "text": "热销"
  26.                 }
  27.             },
  28.             {
  29.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  30.                 "text": "导航4"
  31.             }
  32.         ]
  33.     },
  34.     "body": {
  35.         "type": "grid-nav",
  36.         "source": "${items}",
  37.         "border": false
  38.     }
  39. }

点击交互

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

  1. {
  2.     "type": "page",
  3.     "data": {
  4.         "items": [
  5.             {
  6.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  7.                 "text": "外部跳转",
  8.                 "link": "https://www.baidu.com",
  9.                 "blank": true
  10.             },
  11.             {
  12.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  13.                 "text": "弹框",
  14.                 "clickAction": {
  15.                     "actionType": "dialog",
  16.                     "dialog": {
  17.                         "title": "弹框",
  18.                         "body": "这是个简单的弹框。"
  19.                     }
  20.                 }
  21.             },
  22.             {
  23.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  24.                 "text": "内部跳转",
  25.                 "link": "/docs/index"
  26.             },
  27.             {
  28.                 "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
  29.                 "text": "导航4"
  30.             }
  31.         ]
  32.     },
  33.     "body": {
  34.         "type": "grid-nav",
  35.         "source": "${items}",
  36.         "border": false
  37.     }
  38. }

属性表

属性名 类型 默认值 说明
type string grid-nav
className string 外层 CSS 类名
itemClassName 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