test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-15 09:21:13 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
b428325895
amis/docs/zh-CN/components/grid-nav.md
张涛 729924cc53
feat: 宫格导航 (#3044) 
* feat: 宫格导航

* feat: 添加直接页面跳转配置

* feat: 宫格导航兼容url与link格式
2021-11-24 20:10:04 +08:00

11 KiB
Raw Blame History

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 类名
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