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

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...