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

【Vue3】【Naive UI】标签

- - [title 属性](#title 属性)
  - [bordered 属性](#bordered 属性)
  - [header-style 和 body-style 属性](#header-style 和 body-style 属性)
  - [footer 属性](#footer 属性)
  - [actions 属性](#actions 属性)
  - [hoverable 属性](#hoverable 属性)
  - [loading 属性](#loading 属性)
  - [size 属性](#size 属性)
  - [type 属性](#type 属性)
  - [cover 和 avatar 属性](#cover 和 avatar 属性)
  - [description 属性](#description 属性)
  - [style 属性](#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：卡片右上角的操作区。

示例：带动作按钮的卡片

javascript 复制代码

<template>
  <n-card
    title="我的卡片"
    :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）。

javascript 复制代码

<template>
  <n-card title="我的旅行相册">
    <p>这里展示了我的旅行照片。</p>
  </n-card>
</template>

<script setup>
import { NCard } from 'naive-ui';
</script>

bordered 属性

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

javascript 复制代码

<template>
  <n-card bordered :title="'无边框卡片'" :bordered="false">
    <p>这是一个没有边框的卡片。</p>
  </n-card>
</template>

<script setup>
import { NCard } from 'naive-ui';
</script>

header-style 和 body-style 属性

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

javascript 复制代码

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

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

javascript 复制代码

<template>
  <n-card
    title="带有底部内容的卡片"
    footer="这是卡片的底部信息">
    <p>这里是卡片的主要内容。</p>
  </n-card>
</template>

<script setup>
import { NCard } from 'naive-ui';
</script>

actions 属性

actions 是一个数组，用于在卡片右上角添加操作按钮。

每个操作项都是一个对象，包含 text 和 onClick 函数。

javascript 复制代码

<template>
  <n-card
    title="带有操作按钮的卡片"
    :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 时，鼠标悬停在卡片上会有一个浮起的效果。

javascript 复制代码

<template>
  <n-card
    title="可悬停效果的卡片"
    :hoverable="true"
  >
    <p>将鼠标悬停在这张卡片上试试看。</p>
  </n-card>
</template>

<script setup>
import { NCard } from 'naive-ui';
</script>

loading 属性

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

javascript 复制代码

<template>
  <n-card
    title="加载中的卡片"
    :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'。

javascript 复制代码

<template>
  <n-card
    title="小尺寸卡片"
    size="small"
  >
    <p>这是一张小尺寸的卡片。</p>
  </n-card>
</template>

<script setup>
import { NCard } from 'naive-ui';
</script>

type 属性

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

javascript 复制代码

<template>
  <n-card
    title="内嵌式卡片"
    type="inner"
  >
    <p>这张卡片看起来像是内嵌在页面中的。</p>
  </n-card>
</template>

<script setup>
import { NCard } from 'naive-ui';
</script>

cover 和 avatar 属性

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

javascript 复制代码

<template>
  <n-card
    title="带有封面和头像的卡片"
    :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 属性用来添加对卡片内容的描述性文字。

javascript 复制代码

<template>
  <n-card
    title="带描述的卡片"
    :description="'这是一张带有描述文字的卡片。'"
  >
    <p>卡片的内容在此处。</p>
  </n-card>
</template>

<script setup>
import { NCard } from 'naive-ui';
</script>

style 属性

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

在 Naive UI 的组件中，可以使用 style 属性来为整个卡片设置 CSS 样式。

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

javascript 复制代码

<template>
  <n-card
    title="自定义样式的卡片"
    :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】＜NCard＞ 标签

【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】标签