用法
基于 卡片 组件构建的 PageCard 可以用在 页面网格、页面列 或 登陆页面网格 中。
使用 title、description 和 icon 属性自定义卡片。
Tailwind CSS
在几秒钟内将 Tailwind CSS 添加到您的 Nuxt 应用程序中，并包含 PurgeCSS 以实现最小的 CSS。
<template>
<UPageCard
title="Tailwind CSS"
description="Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS."
icon="i-simple-icons-tailwindcss"
/>
</template>
您还可以传递来自 NuxtLink 组件的任何属性，例如 to、target、exact 等。
<template>
<UPageCard
title="Tailwind CSS"
description="Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS."
icon="i-simple-icons-tailwindcss"
to="https://nuxtjs.org.cn/modules/tailwindcss"
target="_blank"
/>
</template>
插槽
页眉
{}
图标
{}
标题
{}
描述
{}
页脚
{}
默认
{}
属性
目标
"_blank" | "_parent" | "_self" | "_top" | (string & {})
跳转
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
活动类
string
精确活动类
string
aria 当前值
"page" | "step" | "location" | "date" | "time" | "true" | "false"
预取类
string
图标
string
undefined标题
string
undefined描述
string
undefinedui
DeepPartial<{ wrapper: string; to: string; icon: { wrapper: string; base: string; }; body: { base: string; }; title: string; description: string; } & { base: string; background: string; divide: string; ring: string; ... 4 more ...; footer: { ...; }; }>
{}href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
rel
any
替换
boolean
noRel
boolean
预取
boolean
noPrefetch
boolean
外部
boolean
配置
{
wrapper: 'relative group',
to: 'hover:ring-2 hover:ring-primary-500 dark:hover:ring-primary-400 hover:bg-gray-100/50 dark:hover:bg-gray-800/50',
icon: {
wrapper: 'mb-6 flex',
base: 'w-10 h-10 flex-shrink-0 text-primary'
},
body: {
base: 'flex-1'
},
title: 'text-gray-900 dark:text-white text-base font-semibold truncate flex items-center gap-1.5',
description: 'text-[15px] text-gray-500 dark:text-gray-400 mt-1'
}