当前位置: 首页 > 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()方法创建一个音频播放器实…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...