卡片

Card 组件用于将内容划分为语义化的区块。本质上，它是一个用于组织内容的容器，并可选择折叠。

§用法

该组件有四种类型。

§带主题

带主题的卡片可以改变背景或描边颜色。通常用于描述一个区块的错误/成功状态或用户警告。这种卡片最常用于以默认颜色（普通）组合内容。theme 参数指定卡片的样式，而 View 参数决定卡片是描边还是填充。

此类卡片（容器）有以下选项：

View: Outlined / Filled

Theme: Normal, Info, Success, Warning, Danger (color)

• Normal - 卡片的描边基本状态，大多数情况下使用。
• Info — 用于向用户提供信息。
• Success — 用于指示具有积极结果的事件。
• Warning — 用于显示警告。
• Danger 是一个旨在引起用户最多注意力的容器；它可能由数据丢失、服务中断等触发。

§可选卡片

此类卡片要求您从可用选项中选择一个。卡片有三种状态：正常、选中和悬停。

此类卡片（type = selection）有以下选项：

selected: true / false

disabled: true / false

§浮动卡片

用于组织内容，类似于“带主题”组中的 Normal。主要区别在于此卡片类型带有阴影。我们建议在需要突出显示卡片的情况下使用它。例如，与小部件一起使用：

请记住在这些卡片之间留出足够的空间，以免阴影投射到相邻的卡片上。

在 L 尺寸下，卡片具有更“通透”的阴影，因此在使用此尺寸时，建议选择比 M 尺寸稍大的卡片间距。

type: container;

view: raised

§带操作的浮动卡片

与前一个卡片类似，但需要点击卡片。与 Raised 卡片不同，它有悬停状态，但没有“可选”状态，如 Selectable 卡片。我们建议在需要为用户提供包含详细描述的选项时使用它。

请记住，点击它会将用户重定向到嵌套页面。因此，用户应该预期这种卡片行为。（应从卡片设计中清晰体现）

此类卡片（type = action）有以下选项：

disabled: true / false

§尺寸

M 和 L 尺寸，以带阴影的卡片（Raised）为例。

提供 M 和 L 两种尺寸。圆角取决于尺寸：L 尺寸（8px）和 2XL 尺寸（16px）。尺寸的选择取决于页面控件的位置、内边距和大小。例如，如果页面对输入框、按钮和其他元素使用 L 尺寸，则卡片也应使用 L 尺寸。

组件的宽度和高度由其内容决定。最小尺寸可以通过与内容的轻微内边距来选择。最大尺寸可以等于页面宽度的 100%。

§用例

卡片使用示例：

1 - 带填充的主题用于通知用户，

2 - 带描边的主题用于组织内容