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