用法
基于 Accordion 组件构建，使用 items 道具传递问题和答案列表。
<script setup lang="ts">
const items = [{
label: 'Do you have a free trial?',
content: 'Ea est ex aliqua exercitation quis et cillum adipisicing sit tempor veniam incididunt labore.'
}, {
label: 'Can I use Nuxt UI Pro for Open Source projects?',
content: 'Et adipisicing do do do sunt irure proident consequat fugiat tempor occaecat commodo fugiat in proident.'
}, {
label: 'What does “Unlimited minor & patch updates” include?',
content: 'Dolor dolor consectetur tempor consectetur sint ut id ex quis voluptate dolore incididunt qui mollit.'
}, {
label: 'Do you offer technical support?',
content: 'Sint id sint incididunt culpa.'
}]
</script>
<template>
<ULandingFAQ :items="items" multiple />
</template>
您可以将
multiple 道具设置为 true，以允许同时打开多个项目。此组件可以直接放在 LandingSection 内，其内容可以轻松地从 @nuxt/content 中获取
content/index.yml
faq:
title: Frequently Asked Questions
description: If you can't find what you're looking for, email our support team and if you're lucky someone will get back to you.
items:
- label: Do you have a free trial?
content: We have much better than a free trial, you can use Nuxt UI Pro for free in development mode. Once you are ready to deploy your application, you can purchase a license.
defaultOpen: true
- label: Can I use Nuxt UI Pro for Open Source projects?
content: Yes, you can use Nuxt UI Pro for your open source projects as well as your commercial projects as long as you don't sell Nuxt UI Pro as a product and that you don't share your license key.
- label: What does “Unlimited minor & patch updates” include?
content: We add new components and improvements to Nuxt UI Pro as we get new ideas and feedback, you will receive these updates for the major version you purchased. :br **Your license key will work forever for the major version.** We may release a major version including more advanced components and features in the future, you will be able to upgrade to this version with a generous discount.
- label: Do you offer technical support?
content: Once you sign up you get access to our private GitHub repository, where you can ask questions, report bugs or feature requests and get help from other customers. If you require more specialised support or consultancy, contact us at [email protected].
我们在这里使用
.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.faq.title" :description="page.faq.description">
<ULandingFAQ :items="page.faq.items" multiple>
<template #item="{ item }">
<MDC :value="item.content" class="prose prose-primary dark:prose-invert max-w-none text-gray-500 dark:text-gray-400" />
</template>
</ULandingFAQ>
</ULandingSection>
</template>
道具
ui
任何
{}items
AccordionItem[]
[]multiple
布尔值
false配置
{
wrapper: 'divide-y divide-gray-200 dark:divide-gray-800 -mt-6',
item: {
size: 'text-base',
padding: 'py-6'
},
button: {
base: 'text-left text-lg py-6',
label: 'text-gray-900 dark:text-white',
trailingIcon: {
name: 'i-heroicons-chevron-down-20-solid',
base: 'w-5 h-5 ms-auto transform transition-transform duration-200 flex-shrink-0 mr-1.5',
active: '',
inactive: '-rotate-90'
}
}
}