# 项目列表 [TOC] ## 1. 效果展示 ![](https://img.kancloud.cn/31/3d/313de1c7379262fa7baf7108fc7ea2c4_928x344.png) ## 2. 添加项目列表 点击`“表单组件”`选择`“项目列表”`,即可添加项目列表 ![](https://img.kancloud.cn/d7/ec/d7ec107baa8bf2606cbc21a9a5e1ea64_828x429.png) ## 3. 数据 ### 3.1 静态数据 * 使用静态数据时,可直接在静态数据输入框中,输入JSON icon图标使用:[查看专题](制作图标库.md) href:配置相对路径可跳转系统内部地址,如:`/dashboard/analysis` 配置http/https可跳转外部路径,如:`http://jeecg.com` ![](https://img.kancloud.cn/2d/f5/2df5e1c19af3e48753134a28bc19251a_1087x729.png) * JSON数据格式: ``` [ { "title": "Github", "icon": "icon-jeecg-social-github", "color": "", "desc": "不要等待机会,而要创造机会。", "group": "开源组", "date": "2021-04-01", "href": "http://jeecg.com" }, { "title": "Vue", "icon": "icon-jeecg-social-buysellads", "color": "#3fb27f", "desc": "现在的你决定将来的你。", "group": "算法组", "date": "2021-04-01", "href": "/system/user" }, { "title": "Html5", "icon": "icon-jeecg-html5", "color": "#e18525", "desc": "没有什么才能比努力更重要。", "group": "上班摸鱼", "date": "2021-04-01" }, { "title": "Angular", "icon": "icon-jeecg-social-product-hunt", "color": "#bf0c2c", "desc": "热情和欲望可以突破一切难关。", "group": "UI", "date": "2021-04-01" }, { "title": "React", "icon": "icon-jeecg-social-skype", "color": "#00d8ff", "desc": "健康的身体是实目标的基石。", "group": "技术牛", "date": "2021-04-01" }, { "title": "Js", "icon": "icon-jeecg-social-pengyou", "color": "#4daf1bc9", "desc": "路是走出来的,而不是空想出来的。", "group": "架构组", "date": "2021-04-01" } ] ``` ### 3.2 动态数据 [查看专题](2.动态数据使用.md) * API数据集返回JSON格式:同静态数据格式 * 定时刷新(单位:秒) 配置秒数时,接口数据修改后,可自动刷新数据 ![](https://img.kancloud.cn/9d/b4/9db47fd237b9dc155ac27a00239b48df_239x97.png) ## 4. 属性 ### 4.1 内容设置 * 列数:每列显示的个数 ![](https://img.kancloud.cn/ad/ae/adaeca041b513e9cf89f91e11c2822fa_1078x472.png) * 图表大小:设置图表大小 * 图标库:[查看专题](制作图标库.md) ### 4.2 卡片设置 [查看专题](1.1卡片.md) ## 5. 交互 联动:[查看专题](6.4联动配置.md)