amis2/docs/zh-CN/components/grid-nav.md

title	description	type	group	menuName	icon	order
GridNav 宫格导航		0	⚙ 组件	GridNav 宫格导航		54

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

基本用法

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

{
    "type": "page",
    "data": {
        "items": [
          {
            "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
            "text": "导航1"
          },
          {
            "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
            "text": "导航2"
          },
          {
            "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
            "text": "导航3"
          },
          {
            "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
            "text": "导航4"
          }
        ]
    },
    "body": [
        {
            "type": "grid-nav",
            "source": "${items}"
        },
        {
            "type": "divider"
        },
        {
            "type": "grid-nav",
            "name": "items"
        }
    ]
}

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

{
    "type": "page",
    "body": {
        "type": "grid-nav",
        "options": [
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航1"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航2"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航3"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航4"
            }
        ]
    }
}

自定义列数

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

{
    "type": "page",
    "data": {
        "items": [
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航1"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航2"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航3"
            }
        ]
    },
    "body": {
        "type": "grid-nav",
        "columnNum": 3,
        "source": "${items}"
    }
}

正方形格子

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

{
    "type": "page",
    "data": {
        "items": [
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航1"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航2"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航3"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航4"
            }
        ]
    },
    "body": {
        "type": "grid-nav",
        "source": "${items}",
        "square": true
    }
}

格子间距

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

{
    "type": "page",
    "data": {
        "items": [
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航1"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航2"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航3"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航4"
            }
        ]
    },
    "body": {
        "type": "grid-nav",
        "source": "${items}",
        "gutter": 20
    }
}

内容横排

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

{
    "type": "page",
    "data": {
        "items": [
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航1"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航2"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航3"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航4"
            }
        ]
    },
    "body": {
        "type": "grid-nav",
        "direction": "horizontal",
        "source": "${items}"
    }
}

图标占比

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

{
    "type": "page",
    "data": {
        "items": [
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航1"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航2"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航3"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航4"
            }
        ]
    },
    "body": {
        "type": "grid-nav",
        "iconRatio": "40",
        "source": "${items}"
    }
}

角标提示

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

{
    "type": "page",
    "data": {
        "items": [
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航1",
                "badge": {
                    "mode": "text",
                    "text": "10"
                }
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航2",
                "badge": {
                    "mode": "dot"
                }
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航3",
                "badge": {
                    "mode": "ribbon",
                    "text": "热销"
                }
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航4"
            }
        ]
    },
    "body": {
        "type": "grid-nav",
        "source": "${items}",
        "border": false
    }
}

点击交互

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

{
    "type": "page",
    "data": {
        "items": [
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "外部跳转",
                "link": "https://www.baidu.com",
                "blank": true
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "弹框",
                "clickAction": {
                    "actionType": "dialog",
                    "dialog": {
                        "title": "弹框",
                        "body": "这是个简单的弹框。"
                    }
                }
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "内部跳转",
                "link": "/docs/index"
            },
            {
                "icon": "https://internal-amis-res.cdn.bcebos.com/images/icon-1.png",
                "text": "导航4"
            }
        ]
    },
    "body": {
        "type": "grid-nav",
        "source": "${items}",
        "border": false
    }
}

属性表

属性名	类型	默认值	说明
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