Card 卡片

基本用法

卡片用于显示易于阅读的显示内容。
其他用法可以参考卡片网格部分。

<Card
    title="卡片标题"
    body="卡片内容"
/>

卡片标题

卡片内容

代码演示

典型卡片

包含标题、内容、操作区域。

<Card
    title="卡片标题 Card title"
    body="卡片内容 Card body"
    actions="操作区域 Card actions"
/>

卡片标题 Card title

卡片内容 Card body

操作区域 Card actions

紧凑型卡片

你可以使用 compact 来便捷的添加边框。

<Card
    title="卡片标题 Card title"
    body="卡片内容 Card body"
    actions="操作区域 Card actions"
    compact
/>

// 等同于
<Card
    title="卡片标题 Card title"
    body="卡片内容 Card body"
    actions="操作区域 Card actions"
    classes={{
        container:"card-compact"
    }}
/>

卡片标题 Card title

卡片内容 Card body

操作区域 Card actions

使用边框 / 阴影

你可以使用 bordered 来便捷的添加边框。

<Card
    title="卡片标题 Card title"
    body="卡片内容 Card body"
    actions="操作区域 Card actions"
    bordered
/>

// 等同于
<Card
    title="卡片标题 Card title"
    body="卡片内容 Card body"
    actions="操作区域 Card actions"
    classes={{
        container:"card-bordered"
    }}
/>

卡片标题 Card title

卡片内容 Card body

操作区域 Card actions

使用 shadow 来便捷的添加阴影

<Card
    title="卡片标题 Card title"
    body="卡片内容 Card body"
    actions="操作区域 Card actions"
    shadow
/>

// 等同于
<Card
    title="卡片标题 Card title"
    body="卡片内容 Card body"
    actions="操作区域 Card actions"
    classes={{
        container:"shadow-xl"
    }}
/>

卡片标题 Card title

卡片内容 Card body

操作区域 Card actions

使用 slot：更灵活的展示内容

你可以通过 slot=title slot=body slot=actions 来更灵活的展示内容。

<Card>
    <div slot="title">【标题插入部分 Card title】</div>
    <div slot="body">【内容插入部分 Card body】</div>
    <div slot="actions">【操作区域 Card actions】</div>
</Card>

【标题插入部分 Card title】

【内容插入部分 Card body】

【操作区域 Card actions】

注意：使用插槽时，优先级高于 Card 标签对应的属性， Card 标签属性将不再生效。

<Card
    title="生效的 Card title"
    body="不生效的 Card body"
    actions="不生效的 Card actions"
>
    <div slot="body">【内容插入部分 Card body】</div>
    <div slot="actions">【操作区域 Card actions】</div>
</Card>

生效的 Card title

【内容插入部分 Card body】

【操作区域 Card actions】

使用背景图

你可以使用 cover 来指定背景图的 url 地址。

<Card
    cover="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
    title="卡片标题"
    body="卡片内容"
/>

卡片标题

卡片内容

设置背景图位置

可以使用 coverPosition 来指定背景图放置的位置。

coverPosition=top

卡片标题

卡片内容

coverPosition=bottom

卡片标题 coverPosition=bottom

卡片内容

coverPosition=side

卡片标题 coverPosition=side

卡片内容

coverPosition=overlay

卡片标题 coverPosition=bottom

卡片内容

设置响应式卡片

可以使用 classes.container=w-full lg:card-side 来指定背景图放置的位置。

<Card
    cover="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
    title="卡片标题"
    body="卡片内容"
    classes={{
        container: "w-full lg:card-side"
    }}
/>

设置响应式卡片 卡片标题

设置响应式卡片 卡片内容

使用半透明背景

你可以使用 glass 来设置卡片的背景半透明。

<Card
    cover="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
    title="卡片标题"
    body="卡片内容"
    glass
/>

// 等同于
<Card
    cover="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
    title="卡片标题"
    body="卡片内容"
    classes={{
        container:"glass"
    }}
/>

卡片标题 coverPosition=glass

卡片内容

API

Card

属性	说明	类型	默认值
title	设置卡片标题	string	""
body	设置卡片内容区域	string	""
cover	卡片封面	string	""
coverPosition	设置卡片封面位置，可选位置有：顶部 “top”，底部 “bottom”，侧边栏 “side”，元素背景 “overlay”	string	”top”
classes	作用于 Card 的样式	Card.classes	-
bordered	添加边框	boolean	false
shadow	添加阴影效果	boolean	false
compact	使用紧凑型卡片	boolean	false
glass	使用半透明背景	boolean	false

Card.classes

属性	说明	类型	默认值
container	作用于卡片最外层包裹元素样式	string	”w-96”
title	作用于卡片标题区域样式	string	""
body	作用于卡片内容区域样式	string	""
actions	作用于卡片底部操作组	string	""

Card.slot

属性	说明	类型	默认值
title	插入卡片标题的内容	node	""
body	插入卡片的内容	node	""
actions	插入卡片底部操作组内容	node	""