用法
该 LandingCTA 组件将使用 Card 包裹您的内容。
使用 title、description 和 icon 道具来定制卡片内容。
受到我们出色的社区的信任和支持
我们建立了牢固而持久的合作伙伴关系。他们的信任是我们前进的动力，推动我们走向共同的成功。
<template>
<ULandingCTA
title="Trusted and supported by our amazing community"
description="We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success."
card
/>
</template>
您可以通过将
card 道具设置为 false 来禁用其边框和卡片样式。您可以在默认插槽中添加任何您想要的内容，例如渐变或图像（这将在全屏上呈现得更好）。
您可以将 align 道具从 center 更改为 left 或 right 以水平定位插槽。
加入我们
Incididunt fugiat duis in.
<template>
<ULandingCTA
title="Join us"
description="Incididunt fugiat duis in."
align="left"
card
>
<img
src="https://picsum.photos/640/360"
class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
/>
</ULandingCTA>
</template>
使用 links 道具在描述下方添加一些 Buttons。
受到我们出色的社区的信任和支持
我们建立了牢固而持久的合作伙伴关系。他们的信任是我们前进的动力，推动我们走向共同的成功。
<template>
<ULandingCTA
title="Trusted and supported by our amazing community"
description="We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success."
card
:links="[{ label: 'Get started', color: 'gray', size: 'md' }, { label: 'Learn more', variant: 'link', color: 'gray', size: 'md', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]"
/>
</template>
此组件可以直接放在 LandingSection 或 Container 中，并从 @nuxt/content 中轻松获取其内容
content/index.yml
cta:
title: Trusted and supported by our amazing community
description: We've built a strong, lasting partnership. Their trust is our driving force, propelling us towards shared success.
links:
- label: 'Get started'
color: 'gray'
size: 'md'
- label: 'Learn more'
variant: 'link'
color: 'gray'
size: 'md'
trailingIcon: 'i-heroicons-arrow-right-20-solid'
我们在这里使用
.yml 文件作为示例，但您可以使用 @nuxt/content 支持的任何格式，例如 .md 或 .json。pages/index.vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>
<template>
<ULandingSection>
<ULandingCTA v-bind="page.cta" card />
</ULandingSection>
</template>
插槽
标题
{}
描述
{}
链接
{}
默认
{}
道具
标题
字符串
未定义链接
(Button & { click?: (...args: any[]) => void; })[]
[]ui
任何
{}描述
字符串
未定义对齐
"left" | "center" | "right"
"center"卡片
布尔值
真的配置
{
wrapper: 'relative',
container: 'text-center',
body: {
base: 'flex flex-col gap-16 sm:gap-y-24',
padding: 'py-24 sm:py-32 sm:px-16'
},
title: 'text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl',
description: 'mt-6 text-lg/8 text-gray-600 dark:text-gray-300',
links: 'mt-10 flex items-center justify-center gap-x-6'
}