主题
Card 卡片
使用
将信息聚合在卡片容器中展示。
基础用法
卡片包含标题,内容以及操作区域。
Card
组件由 header
body
和 footer
组成。 header
和 footer
是可选的,其内容取决于一个具名的 slot
。
简单卡片
卡片可以只有内容区域。
有图片内容的卡片
可配置定义更丰富的内容展示。
配置 body-style
属性来自定义 body
部分的样式。 在这个例子中我们还使用了 k-col
组件来布局。
带有阴影效果的卡片
你可以定义什么时候展示卡片的阴影效果。
通过 shadow
属性设置卡片阴影出现的时机。 该属性的值可以是:always
、hover
或 never
。
API
Card Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
header | 卡片的标题。你既可以通过设置 header 来修改标题,也可以通过 slot#header 传入 DOM 节点。 | string | - |
footer | 卡片页脚。你既可以通过设置 footer 来修改页脚内容,也可以通过 slot#footer 传入 DOM 节点。 | string | - |
body-style | body 的 CSS 样式。 | object | - |
body-class | body 的自定义类名。 | string | - |
shadow | 卡片阴影显示时机。 | enum | always |
Card Slots
插槽名 | 描述 | 参数 |
---|---|---|
default | 自定义默认内容。 | - |
header | 卡片标题内容。 | - |
footer | 卡片页脚内容。 | - |