聚合同类信息的容器,使信息分类更加明确。
通用原则
- 单个卡片内需是相同属性、类型的内容,或针对同一对象的信息聚合
- 同类卡片组合使用时,样式及交互应保持一致
- 多个卡片嵌套不宜过于复杂,建议卡片嵌套不超过两层
- 卡片通常按照栅格的规则进行排列
- 当整个卡片可点击的时候,需给出明确指示
类型
类型 | 何时使用 |
---|---|
常规 | 作为模块级容器时使用,比如 Dashobard 中的卡片 |
常规+选项卡 | 同常规,但需同时展示多个同类信息的场景 |
盒子 | 作为页面级容器时使用 |
盒子 + 选项卡 | 同盒子,但需同时展示多个同类信息的场景 |
常规
常规 + 选项卡
在常规类型基础上,搭配「Tab 选项卡」使用,同时展示多个相同类型的信息。
盒子
盒子+选项卡
构成
- 标题
- 不允许折行,不允许省略
- 可根据业务需要增加标签
- 可搭配选项卡使用:
- 常规:使用选项卡时,直接替换标题
- 盒子:可搭配选项卡使用,标题不受影响
- 常规:使用选项卡时,直接替换标题
- 不允许折行,不允许省略
- 辅助说明(可选)
- 不允许折行,不允许省略,可增加
Link
- 搭配选项卡使用时,建议取消
- 不允许折行,不允许省略,可增加
- 操作区
- 常规:最多一个操作项,或使用「…」,点击后查看所有操作项
- 盒子:不做特定限制
- 常规:最多一个操作项,或使用「…」,点击后查看所有操作项
- 内容区
- 内容不做限定,可以为图表、文字、图形等等
- 内容区高度可固定后内部滚动
- 内容不做限定,可以为图表、文字、图形等等
- 容器
行为
切换选项卡
选项卡默认选中第一个,点击可切换。
查看全部操作
常规类型中,通常把操作收起在「···」中,点击后唤起菜单。
样式
布局
卡片根据栅格进行布局。