用法
基于 Card 组件构建的 LandingCard 可用于 LandingGrid 或 PageGrid 中。
使用 title、description、icon 和 color 属性自定义卡片。
你也可以传递来自 NuxtLink 组件的任何属性，例如 to、target、exact 等。
调色板
从你的 Tailwind CSS 调色板中选择一个主要颜色和一个灰色。组件将根据此进行相应样式设置。
<template>
<ULandingCard
title="Color Palette"
description="Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly."
icon="i-heroicons-swatch"
color="primary"
/>
</template>
你可以在默认插槽中添加任何你想要的内容，例如图片。
你可以将 orientation 属性从 vertical 更改为 horizontal 以将插槽定位在内容的右侧。
投资组合
Veniam minim ipsum anim。Irure voluptate magna dolore id dolore ex quis sint sint et duis dolor enim fugiat。
<template>
<ULandingCard
title="Portfolio"
description="Veniam minim ipsum anim. Irure voluptate magna dolore id dolore ex quis sint sint et duis dolor enim fugiat."
icon="i-heroicons-photo"
color="primary"
orientation="horizontal"
>
<img
src="https://picsum.photos/640/360?grayscale"
class="w-full rounded-md"
/>
</ULandingCard>
</template>
插槽
图标
{}
标题
{}
描述
{}
默认
{}
容器
{}
属性
目标
"_blank" | "_parent" | "_self" | "_top" | (string & {})
到
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
activeClass
string
exactActiveClass
string
ariaCurrentValue
"page" | "step" | "location" | "date" | "time" | "true" | "false"
prefetchedClass
string
标题
string
undefined描述
string
undefined图标
string
undefined颜色
string
"主要"方向
"vertical" | "horizontal"
"vertical"ui
任何
{}href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
rel
任何
替换
布尔值
noRel
布尔值
预取
布尔值
noPrefetch
布尔值
外部
布尔值
配置
{
wrapper: 'relative group isolate rounded-xl background-gradient ring-1 ring-gray-200 dark:ring-gray-800 before:hidden before:lg:block before:absolute before:-inset-[2px] before:h-[calc(100%+4px)] before:w-[calc(100%+4px)] before:z-[-1] before:rounded-[13px] flex-1 flex flex-col shadow',
to: 'hover:ring-primary-500 dark:hover:ring-primary-400 transition-shadow duration-200',
base: 'flex-1 flex flex-col overflow-hidden',
container: '',
body: {
base: 'gap-x-8 gap-y-4 rounded-xl flex-1 flex flex-col'
},
background: 'bg-white dark:bg-gray-900 hover:bg-opacity-90 dark:hover:bg-opacity-90 transition-[background-opacity]',
ring: '',
rounded: 'rounded-xl',
shadow: '',
icon: {
wrapper: 'mb-2 pointer-events-none',
base: 'w-8 h-8 flex-shrink-0 text-gray-900 dark:text-white'
},
title: 'text-gray-900 dark:text-white text-base font-bold truncate',
description: 'text-[15px] text-gray-500 dark:text-gray-400 mt-1'
}