卡片容器 Cardbox
卡片是一个显示与单个主题相关的内容和可被操作的容器。
通过卡片组件,快速浏览相关和可操作的信息更为便捷。 像文本和图像这样的元素,应按照清晰的布局来排列,以此呈现结构层次。
尽管卡片支持多操作、多个 UI 控件,但切记不要滥用它,卡片只能作为那些复杂或详细信息的一个摘要入口。
在特殊场景中,卡片内容是可以展开的。 (点击向下箭头的按钮来查看更多信息。)
主要交互区及内容交互点:
通常情况下,卡片允许用户与它的整个可视区域进行交互,以触发它的主要动作,链接到另一个屏幕或使用其他行为。
上图:整个卡片是交互区
卡片还可以提供额外的操作功能,这些功能应该脱离主操作区域,以避免事件重叠。
卡片间距
在移动端页面设计中卡片式布局是非常常见的布局方式,至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定,通常最小不低于16px,过小的间距会造成用户的紧张情绪,使用最多的间距是16px、20px、24px、30px、40px,当然间距也不宜过大,过大的间距会使界面变得松散。
间距的控制遵循2X-Even Grid原则。请参见“ArcUI空间说明”
卡片
1、默认白色直角
2、投影可配置
3、圆角可配置
4、样式包含:
默认、带标题、折叠模式
注意:卡片与lis的差异。
属性栏或预制样式中的样式配置: