容器
Card
一块有边界的表面,下面没有阴影。
什么时候用它
需要读作“浮起来”的卡片是 plate,它靠反色分离,而不是靠模糊。
示例
variants
Recent deploys
greenTwelve releases in the last thirty days, none rolled back.
The reversed plate
One per screen. It separates by reversal, because this system has no blur to raise it with.
说明
一块有边界的表面。
按法则,没有阴影:这套系统里的深度是一条细线和一次底色变化,绝不是模糊。一张需要读作“浮起来”的卡片应该用 plate,它靠反转来区分。
用带名字的子部件来组合;当一张卡片没有像样的头部和尾部时,直接把内容丢进去也行。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| variant | 'outline' | 'plate' | 'flat' | 'outline' | `outline` 是页面底色上的一个细线框——默认值,也是一张卡片跟其他卡片并排时的正确选择。`plate` 用那一块反转表面填充,留给“本身就是这一段的重点”的卡片;一屏最多一个。`flat` 完全去掉边框,用于网格本身已经画出了单元格之间分割线的卡片。 |
同时接受 HTMLAttributes<HTMLDivElement> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
组成部分
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
CardHeader
头部一行——标题在左,动作或标记在右。
这个组件没有自己的属性。
CardTitle
卡片的标题,用书刊衬线体。
默认是 <h3>,这在一个自带 <h2> 的区块里是对的,在几乎其他任何地方都是错的——请传 as,而不是留下一个标题层级会跳级的页面。
这个组件没有自己的属性。
CardBody
内容区。
这个组件没有自己的属性。
CardFooter
一条安静的条带,放元数据或次要动作。
这个组件没有自己的属性。