卡片

使用方法

1.卡片默认无外边框，标题无下边框，可通过设置size为default或者small，控制尺寸

默认卡片

卡片内容...

small size 卡片

卡片内容...

查看代码

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>

2.通过设置bordered属性展示卡片外边框，titleBorder属性展示标题下边框

bordered为true

卡片内容...

titleBorder为true

卡片内容...

查看代码

vue

<n-card class="mt-lg mb-lg" :bordered="true" title="bordered为true">
    <div>卡片内容...</div>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
</n-card>
<n-card class="mt-lg mb-lg" :titleBorder="true" title="titleBorder为true">
    <div>卡片内容...</div>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
</n-card>

3.卡片无标题

卡片内容...

查看代码

vue

<n-card class="mt-lg mb-lg">
    <div>卡片内容...</div>
    <div>卡片内容...</div>
    <div>卡片内容...</div>
</n-card>

样式说明

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

卡片 ​

使用方法 ​

样式说明 ​

卡片

使用方法

样式说明