文档

Appearance

卡片 ​

代码演示 ​

典型卡片
包含标题、内容、操作区域。 卡片默认无外边框，标题无下边框，可通过设置`size`为`default`或者`small`，控制尺寸
默认卡片
more
卡片内容...
卡片内容...
卡片内容...
small size 卡片
more
卡片内容...
卡片内容...
卡片内容...
查看代码
vue
<n-card class="mt-lg mb-lg" title="默认卡片">
    <template #extra><a href="#">more</a></template>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
</n-card>
<n-card class="mt-lg mb-lg" size="small" title="small size 卡片">
    <template #extra><a href="#">more</a></template>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
</n-card>
更灵活的内容展示
可以利用 Card.Meta 支持更灵活的内容
example
Europe Street beat
www.instagram.com
查看代码
vue
<n-card class="mt-lg mb-lg" title="默认卡片">
    <template #extra><a href="#">more</a></template>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
</n-card>
<n-card class="mt-lg mb-lg" size="small" title="small size 卡片">
    <template #extra><a href="#">more</a></template>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
</n-card>
预加载的卡片
数据读入前会有文本块样式
查看代码
vue
<n-card class="mt-lg mb-lg" :loading="true">
    whatever content
</n-card>
简洁卡片
只包含内容区域

Card content

Card content

Card content

查看代码
vue
<n-card class="mt-lg mb-lg" >
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
</n-card>
支持更多内容配置
一种支持封面、头像、标题和描述信息的卡片。
example
Card title
This is the description
查看代码
vue
<n-card class="mt-lg mb-lg" >
    <template #cover>
        <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
    </template>
    <template #actions>
        <setting-outlined key="setting" />
        <edit-outlined key="edit" />
        <ellipsis-outlined key="ellipsis" />
    </template>
    <a-card-meta title="Card title" description="This is the description">
        <template #avatar>
            <a-avatar src="https://joeschmoe.io/api/v1/random" />
        </template>
    </a-card-meta>
</n-card>

样式说明 ​

  1. 卡片默认无边框，需要边框的地方添加:bordered="true"
  2. 卡片标题默认都不带下面的border线，需要则添加:titleBorder="true"
  3. 卡片有标题且无标题下边框时，卡片内容无上边距
  4. 卡片头间距"0 24px"，卡片头标题间距"24px 0 16px"，卡片内容间距"0 24px 24px"
  5. 屏幕宽小于1280时：卡片头间距"0 16px"，卡片头标题间距"16px 0 16px"，卡片内容间距"0 16px 16px"

API ​

参数说明类型默认值
bordered是否有边框Booleanfalse
size卡片大小Stringdefault
title卡片标题String-
titleBorder是否显示标题下borderBooleanfalse

​