# 快速导航 [TOC] ## 1. 效果展示 ![](https://img.kancloud.cn/40/2f/402fa43082edb0f6b70cabb2182b0085_936x278.png) ## 2. 添加快速导航 点击`“表单组件”`选择`“快速导航”`，即可添加快速导航 ![](https://img.kancloud.cn/19/f2/19f2e89b6218a6d55fd2063c61d318e1_836x318.png) ## 3. 数据 ### 3.1 静态数据 * 使用静态数据时，可直接在静态数据输入框中，输入JSON icon图标使用：[查看专题](制作图标库.md) title：显示的标题，如：![](https://img.kancloud.cn/ff/a7/ffa7a4453d4f17cbf8e37ee04421412b_57x78.png) icon：显示图标，如：![](https://img.kancloud.cn/db/04/db045542f591583214997d6fe4d65218_64x82.png) href：配置相对路径可跳转系统内部地址，如：`/dashboard/analysis` 配置http/https可跳转外部路径，如：`http://jeecg.com` ![](https://img.kancloud.cn/f9/7a/f97a0bb69a456dc94309b6eb4859d8e4_1222x550.png) * JSON数据格式： ``` [ { "title": "首页", "icon": "icon-jeecg-homepage", "color": "#7ED321", "href": "/dashboard/analysis" }, { "title": "仪表盘", "icon": "icon-jeecg-shijian", "color": "#bf0c2c", "href": "http://jeecg.com" }, { "title": "组件", "icon": "icon-jeecg-dangan", "color": "#e18525" }, { "title": "系统管理", "icon": "icon-jeecg-shezhi", "color": "#3fb27f" }, { "title": "权限管理", "icon": "icon-jeecg-yuechi", "color": "#4daf1bc9" }, { "title": "图表", "icon": "icon-jeecg-fujin", "color": "#00d8ff" } ] ``` ### 3.2 动态数据 [查看专题](2.动态数据使用.md) * API数据集返回JSON格式：同静态数据格式 * 定时刷新(单位:秒) 配置秒数时，接口数据修改后，可自动刷新数据 ![](https://img.kancloud.cn/9d/b4/9db47fd237b9dc155ac27a00239b48df_239x97.png) ## 4. 属性 ### 4.1 内容设置 * 列数：每列显示的个数 ![](https://img.kancloud.cn/fd/ab/fdab4fa04fc53296d196ff1aa0973edd_1162x469.png) * 对齐方式：左对齐、居中对齐、右对齐 * 图标位置：底部、居左 * 图表大小：设置图表大小 * 图标库：[查看专题](制作图标库.md) ### 4.2 卡片设置 [查看专题](1.1卡片.md) ## 5. 交互(暂无)