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

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

【Vue3】【Naive UI】 标签 title 属性bordered 属性header-style 和 body-style 属性footer 属性actions 属性hoverable 属性loading 属性size 属性type 属性cover 和 avatar 属性description 属性style 属性 【VUE3】【Naive UI】&#xff1c;NCard&#xff1e; 标签 【VUE3】…...

选择排序之大根堆

大根堆&#xff1a;树的根节点大于左右子树的结点值&#xff0c;这样就能保证每次从树根取的是最大值 灵魂在于HeadAdjust函数&#xff0c;以某节点为树根通过下落调整为大根堆&#xff0c; 建树思想 就是&#xff0c;从最后一个非终端结点开始调整以该结点为根的子树&#x…...

AI的魔力:如何为开源软件注入智慧,开启无限可能

“AI的魔力&#xff1a;如何为开源软件注入智慧&#xff0c;开启无限可能” 引言&#xff1a; 在科技发展的浪潮中&#xff0c;开源软件生态一直扮演着推动创新与共享的重要角色。从Linux到Python&#xff0c;开源项目赋予了开发者全球协作的机会&#xff0c;推动了技术的飞速…...

如何在 VPS 上使用 Git 设置自动部署

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 介绍 要了解 Git 的基本知识以及如何安装&#xff0c;请参考介绍教程。 本文将教你如何在部署应用程序时使用 Git。虽然有许多使用 Gi…...

Linux下的三种 IO 复用

目录 一、Select 1、函数 API 2、使用限制 3、使用 Demo 二、Poll 三、epoll 0、 实现原理 1、函数 API 2、简单代码模板 3、LT/ET 使用过程 &#xff08;1&#xff09;LT 水平触发 &#xff08;2&#xff09;ET边沿触发 4、使用 Demo 四、参考链接 一、Select 在…...

通过 SSH 进行WordPress网站的高级服务器管理

我在管理hostease的服务器时&#xff0c;时常需要通过SSH登录服务器进行修改。而在网站管理中&#xff0c;SSH不仅是一个基础工具&#xff0c;更是高级用户用来精细化管理和优化服务器的重要工具。通过SSH&#xff0c;你可以深入监控服务器的性能、精细管理系统资源&#xff0c…...

速盾高防cdn支持移动端独立缓存

随着移动互联网的快速发展&#xff0c;移动端网页访问量也越来越大。然而&#xff0c;移动端的网络环境相对不稳定&#xff0c;用户体验可能会受到影响。因此&#xff0c;使用高防CDN来加速移动端网页访问&#xff0c;成为越来越多网站运营者的首选。 速盾高防CDN是一种分布式…...

PMP–一、二、三模、冲刺–分类–8.质量管理

文章目录 技巧五、质量管理 一模8.质量管理--质量管理计划--质量管理计划包括项目采用的质量标准&#xff0c;到底有没有满足质量需求&#xff0c;看质量标准即可。6、 [单选] 自项目开始以来&#xff0c;作为项目经理同事的职能经理一直公开反对该项目&#xff0c;在讨论项目里…...

如何快速使用Unity 的UPR---1资源检测保姆级

关于我们的性能检测工具已经有很多了&#xff0c;比如UWA的或者是我们的Unity 的UPR 都是很好的&#xff0c;今天说一下UPR吧 官方网址 &#xff1a;UPR - Unity专业性能优化工具 这个是官方给的Demo 选择你的平台就可以 这个可以作为一个参考但是不是很建议用官方的因为我们…...

pytorch中的.clone() 和 .detach()

在PyTorch中&#xff0c;.clone() 和 .detach() 是两个用于处理张量&#xff08;Tensor&#xff09;的方法&#xff0c;它们各自有不同的用途&#xff1a; .clone()&#xff1a; .clone() 方法用于创建一个张量的副本&#xff08;深拷贝&#xff09;。这意味着原始张量和新张量…...

三十二:网络爬虫的工作原理与应对方式

随着互联网的快速发展&#xff0c;网络爬虫&#xff08;Web Crawlers&#xff09;作为一种自动化工具&#xff0c;被广泛应用于搜索引擎、数据采集、网站监控等领域。网络爬虫的作用是通过自动化程序&#xff0c;模拟人类浏览网页的行为&#xff0c;自动下载和解析网页内容&…...

nodejs相关知识介绍

1、nodejs官方文档&#xff1a; https://nodejs.org/zh-cn nodejs可以用nvm进入安装&#xff1b; 2、npm说明&#xff1a; npm官方教程&#xff1a;https://npm.p2hp.com/ npm是 Node.js 的标准包管理器&#xff0c;也就是说nodejs安装好&#xff0c;npm也就安装好了&#…...

MySQL排它锁

MySQL排它锁原理 MySQL中的排它锁&#xff08;Exclusive Lock&#xff09;&#xff0c;也称为独占锁&#xff0c;是一种确保在事务期间&#xff0c;其他事务无法对锁定数据进行读取或修改的锁机制。当一个事务对某一行数据加上排它锁后&#xff0c;其他事务无法对该行数据进行…...

HarmonyOS4+NEXT星河版入门与项目实战(22)------动画(属性动画与显示动画)

文章目录 1、属性动画图解2、案例实现-小鱼移动游戏1、代码实现2、代码解释3、资源图片4、实现效果3、显示动画4、案例修改-显示动画5、总结1、属性动画图解 这里我们用一张完整的图来汇整属性动画的用法格式和使用的主要属性范围,如下所示: 2、案例实现-小鱼移动游戏 1、代…...

Vue3 Ts 如何获取组件的类型

vue3 Ts ref 子组件 1、默认写法 typeof&#xff1a;获取ts类型 InstanceType&#xff1a;获取模版的实例 <tempolate><myComponent ref"myCompRef"> </tempolate><script setup lang"ts"> import { ref } from "vue&quo…...

RAG数据拆分之PDF

引言RAG数据简介PDF解析方法及工具代码实现总结 二、正文内容 引言 本文将介绍如何将RAG数据拆分至PDF格式&#xff0c;并探讨PDF解析的方法和工具&#xff0c;最后提供代码示例。 RAG数据简介 RAG&#xff08;关系型属性图&#xff09;是一种用于表示实体及其关系的图数据…...

【算法day1】数组:双指针算法

题目引用 这里以 1、LeetCode704.二分查找 2、LeetCode27.移除元素 3、LeetCode977.有序数组的平方 这三道题举例来说明数组中双指针的妙用。 1、二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜…...

Ubuntu 22.04 离线安装软件包

在使用最小化安装时&#xff0c;默认是不带有vim 或者nano编辑器的&#xff0c;如果你的环境不能上外网就需要离线安装。 首先你需要先找一台可以上网的ubuntu系统&#xff08;虚拟机搭建也行&#xff09;&#xff0c;下载所有的依赖包&#xff0c;然后上传到需要安装的服务器…...

网络安全——浅谈HTTP协议

HTTP请求 HTTP请求是客户端往服务端发送请求动作&#xff0c;告知服务器自己的要求。 HTTP请求由状态行、请求头、请求正文三部分组成&#xff1a; 状态行&#xff1a;包括请求方式Method、资源路径URL、协议版本Version&#xff1b;请求头&#xff1a;包括一些访问的域名、…...

鸿蒙开发-在ArkTS中制作音乐播放器

音频播放功能实现 导入音频播放相关模块 首先需要从ohos.multimedia.audio模块中导入必要的类和接口用于音频播放。例如&#xff1a; import audio from ohos.multimedia.audio;创建音频播放器实例并设置播放源 可以通过audio.createAudioPlayer()方法创建一个音频播放器实…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

2025年- H71-Lc179--39.组合总和(回溯,组合)--Java版

1.题目描述 2.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...