卡片 (Cards)

卡片 (Card) 组件用于容纳有关单个主题的内容和操作。

结构

卡片组件只有一个插槽。卡片可以包含图标、图像或标签,并且支持自定义。

默认情况下,卡片呈矩形,带有圆角和渐变背景。请将卡片的最大高度设置为 60%,以确保其在屏幕上完全显示,因为圆形显示屏可能会裁剪掉屏幕顶部和底部最多 20% 的区域。

标题卡片

使用 标题卡片 (Title cards) 在应用程序中显示信息(例如消息)。标题卡片具有三槽布局,包括标题、可选的时间字段以及相关内容(图像或文本)。

应用卡片

使用 应用卡片 (App cards) 显示来自多个应用程序的交互元素。应用卡片具有五槽布局,包括应用图标、应用名称、活动发生的时间、某种标题以及相关内容(图像或文本)。

卡片渐变

卡片渐变

顶部/左侧 + 距离左侧 68dp 的内边距 = 100% 表面
底部/右侧 = 0% 表面

图像卡片叠加层

顶部/左侧 + 距离顶/左 56dp 的内边距 = 100% 表面
底部/右侧 + 距离底/右 24dp 的内边距 = 0% 表面
(图像背景上的渐变叠加层)

尺寸

卡片宽度

卡片默认为容器的最大宽度。


卡片高度

卡片高度是灵活的,由组件的内容决定。

在圆形表盘上,超过屏幕高度 60% 的卡片会被裁剪。

用法

自适应布局

TitleCard (标题卡片)

在较大的屏幕上,我们允许增加一行正文文本。为了显示更多的图像内容,请在底部增加 24dp 的内边距。

带内联图像的 TitleCard(替换正文插槽)

在较大的屏幕上,图像不会改变其纵横比,并且右侧带有内边距,以防卡片高度过大。

具有额外自定义的卡片

带有图像背景的卡片

要实现此布局,您需要进行自定义。

图像卡片以背景图像显示与单个主题相关的内容。图像卡片也可以显示独立的图像。

建议将底部内边距增加到 24dp,以便显示更多的背景图像,且文字不会覆盖在上面。