用法
该 LandingTestimonial 组件将您的内容包装在一个 Card 中。
使用 quote、icon 和 author 属性来自定义卡片的内容。
<template>
<ULandingTestimonial
icon="i-simple-icons-google"
quote="Aliquip irure laboris deserunt in dolore in consectetur ex duis. Mollit ad esse ipsum irure id veniam irure culpa dolore labore."
:author="{ name: 'Rose Roberson', description: 'CEO at Google', to: 'https://google.com', target: '_blank', avatar: { src: 'https://i.pravatar.cc/120?img=1', loading: 'lazy' } }"
card
/>
</template>
您可以通过将
card 属性设置为 false 来禁用其边框和卡片样式。此组件可以直接放在一个 PageColumns 中，其内容从 @nuxt/content 轻松获取
content/index.yml
testimonials:
title: What people are saying
description: Hear from our customers about their experience.
items:
- quote: Nostrud tempor sunt fugiat.
author:
name: Rose Roberson
description: CEO at Company
avatar:
src: https://i.pravatar.cc/120?img=1
- quote: Eiusmod dolor aute ut nulla pariatur officia consequat aute amet exercitation.
author:
name: Chace Rodgers
description: CEO at Company
avatar:
src: https://i.pravatar.cc/120?img=7
- quote: Id duis velit enim officia ad nisi incididunt magna ex dolor minim deserunt dolor.
author:
name: Cornelius Sheppard
description: CEO at Company
avatar:
src: https://i.pravatar.cc/120?img=3
我们在这里使用
.yml 文件作为示例，但您可以使用 @nuxt/content 支持的任何格式，例如 .md 或 .json。pages/index.vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>
<template>
<ULandingSection :title="page.testimonials.title" :description="page.testimonials.description">
<UPageColumns>
<!-- Hack for Safari -->
<div v-for="(testimonial, index) in page.testimonials.items" :key="index" class="break-inside-avoid">
<ULandingTestimonial v-bind="testimonial" />
</div>
</UPageColumns>
</ULandingSection>
</template>
插槽
icon
{}
quote
{}
属性
quote必需
字符串
icon
字符串
未定义ui
任何
{}author
{ name: string; description?: string; avatar?: Avatar; } & NuxtLinkProps
未定义card
布尔值
真的配置
{
body: {
base: 'flex flex-col',
padding: ''
},
wrapper: 'relative',
quote: 'text-gray-600 dark:text-gray-300',
icon: {
wrapper: 'mb-6 flex',
base: 'w-8 h-8 flex-shrink-0 text-gray-900 dark:text-white'
},
author: {
wrapper: 'flex items-center gap-3 mt-6 relative',
name: 'font-semibold text-gray-900 dark:text-white text-sm',
description: 'text-gray-500 dark:text-gray-400 text-sm',
avatar: {
base: '',
size: 'md'
}
}
}