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

【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-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）。

<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-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 属性

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

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

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

actions 属性

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

<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 时，鼠标悬停在卡片上会有一个浮起的效果。

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

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

loading 属性

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

<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’。

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

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

type 属性

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

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

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

cover 和 avatar 属性

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

<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 属性用来添加对卡片内容的描述性文字。

<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 属性来定制 组件的外观：

<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 来控制卡片的最大宽度和居中显示。
这样就可以根据需要调整卡片的整体视觉效果。