当前位置：首页 > news >正文

【VUE3】【Naive UI】＜NCard＞标签

news 来源：原创 2025/5/16 14:08:20

【Vue3】【Naive UI】标签

- - title 属性
  - bordered 属性
  - header-style 和 body-style 属性
  - footer 属性
  - actions 属性
  - hoverable 属性
  - loading 属性
  - size 属性
  - type 属性
  - cover 和 avatar 属性
  - description 属性
  - style 属性

【VUE3】【Naive UI】＜NCard＞标签
【VUE3】【Naive UI】＜n-button＞标签
【VUE3】【Naive UI】＜a＞标签
【VUE3】【Naive UI】＜NDropdown＞标签

在 Naive UI 中，<NCard> 是一个非常实用的组件，它用于创建卡片式的布局块。
卡片通常用来展示内容集合，可以包含标题、正文、操作按钮等元素。
卡片是许多现代网站和应用中常见的UI模式，因为它们能够以清晰、组织良好的方式呈现信息。

<NCard> 提供了一些属性来自定义其外观和行为，以下是一些常用的属性：

title：卡片的标题。
bordered：是否显示边框，默认为 true。
header-style 和 body-style：分别用于自定义头部和主体的样式。
footer：卡片底部的内容。
actions：卡片右上角的操作区。

示例：带动作按钮的卡片

<template><n-cardtitle="我的卡片":bordered="true":actions="[{ text: '详情', onClick: () => {} },{ text: '编辑', onClick: () => {} }]"><p>这是卡片的内容部分。</p><n-button type="primary">点击我</n-button></n-card>
</template><script setup>
import { NCard, NButton } from 'naive-ui';
</script>

title 属性

title 属性用于设置卡片的标题。可以是一个简单的字符串或是一个模板引用（TemplateRef）。

<template><n-card title="我的旅行相册"><p>这里展示了我的旅行照片。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

bordered 属性

bordered 属性控制卡片是否显示边框。默认情况下是 true，表示有边框；如果设置为 false，则不显示边框。

<template><n-card bordered :title="'无边框卡片'" :bordered="false"><p>这是一个没有边框的卡片。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

header-style 和 body-style 属性

这两个属性允许你自定义卡片头部和主体部分的样式。

<template><n-cardtitle="定制样式":header-style="{ backgroundColor: '#f5f5f5', padding: '16px' }":body-style="{ padding: '24px' }"><p>这个卡片的头部和主体都有了自定义的样式。</p></n-card>
</template>
<script setup>
import { NCard } from 'naive-ui';
</script>

footer 属性

footer 属性用于在卡片底部添加内容，可以是文本或模板引用。

<template><n-cardtitle="带有底部内容的卡片"footer="这是卡片的底部信息"><p>这里是卡片的主要内容。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

actions 属性

actions 是一个数组，用于在卡片右上角添加操作按钮。
每个操作项都是一个对象，包含 text 和 onClick 函数。

<template><n-cardtitle="带有操作按钮的卡片":actions="[{ text: '查看详情', onClick: () => console.log('查看详情') },{ text: '编辑', onClick: () => console.log('编辑') }]"><p>点击右上角的操作按钮来执行相应的动作。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

hoverable 属性

当设置 hoverable 为 true 时，鼠标悬停在卡片上会有一个浮起的效果。

<template><n-cardtitle="可悬停效果的卡片":hoverable="true"><p>将鼠标悬停在这张卡片上试试看。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

loading 属性

loading 属性用于指示卡片内容是否正在加载中。如果设置为 true，卡片会显示一个加载占位符。

<template><n-cardtitle="加载中的卡片":loading="isLoading"><p v-if="!isLoading">卡片内容已加载完毕。</p></n-card>
</template><script setup>
import { ref, onMounted } from 'vue';
import { NCard } from 'naive-ui';const isLoading = ref(true);onMounted(() => {setTimeout(() => {isLoading.value = false;}, 2000); // 模拟2秒后加载完成
});
</script>

size 属性

size 属性用于设置卡片的大小，可选值包括 ‘default’ 和 ‘small’。

<template><n-cardtitle="小尺寸卡片"size="small"><p>这是一张小尺寸的卡片。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

type 属性

type 属性用于指定卡片类型，例如设置为 ‘inner’ 可以让卡片看起来像是内嵌式的。

<template><n-cardtitle="内嵌式卡片"type="inner"><p>这张卡片看起来像是内嵌在页面中的。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

cover 和 avatar 属性

cover 和 avatar 属性允许你在卡片顶部添加封面图片或者头像。

<template><n-cardtitle="带有封面和头像的卡片":cover="() => <img src='https://example.com/cover.jpg' alt='Cover' />":avatar="() => <img src='https://example.com/avatar.jpg' alt='Avatar' />"><p>这张卡片同时展示了封面图片和头像。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

description 属性

description 属性用来添加对卡片内容的描述性文字。

<template><n-cardtitle="带描述的卡片":description="'这是一张带有描述文字的卡片。'"><p>卡片的内容在此处。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

style 属性

style 是一个非常通用的属性，几乎所有的 HTML 和 Vue 组件都可以使用它来直接设置内联样式。
在 Naive UI 的组件中，可以使用 style 属性来为整个卡片设置 CSS 样式。

下面是一个具体的例子，展示了如何使用 style 属性来定制组件的外观：

<template><n-cardtitle="自定义样式的卡片":style="{ backgroundColor: '#f0f8ff', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', borderRadius: '12px',maxWidth: '300px',margin: 'auto'}"><p>这张卡片使用了自定义的背景颜色、阴影、圆角等样式。</p></n-card>
</template><script setup>
import { NCard } from 'naive-ui';
</script>

在这个例子中，我们通过 :style 绑定了一个对象，该对象包含了多个 CSS 属性，
如 backgroundColor（背景颜色）、boxShadow（阴影）、borderRadius（边框圆角）以及 maxWidth 和 margin 来控制卡片的最大宽度和居中显示。
这样就可以根据需要调整卡片的整体视觉效果。

【Vue3】【Naive UI】 标签