PageAccordionPRO

AccordionGitHub
一个预设样式的 Accordion 组件，用于在页面中显示。

用法

PageAccordion 组件构建于 Accordion 组件之上。其样式与其它页面组件匹配。

<script setup lang="ts">
const items = ref([
  {
    label: 'What are the main considerations when upgrading to Nuxt UI v3?',
    icon: 'i-lucide-circle-help',
    content: 'The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.'
  },
  {
    label: 'Is Nuxt UI v3 compatible with standalone Vue projects?',
    icon: 'i-lucide-circle-help',
    content: 'Nuxt UI is now compatible with Vue! You can follow the installation guide to get started.'
  },
  {
    label: 'What about Nuxt UI Pro?',
    icon: 'i-lucide-circle-help',
    content: 'We also rebuilt Nuxt UI Pro from scratch and released a v3.0.0-alpha.x package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We are actively working to finish the rewrite of all Nuxt UI Pro components.'
  }
])
</script>

<template>
  <UPageAccordion :items="items" />
</template>

示例

使用 markdown 内容

你可以使用MDC组件，该组件来自 @nuxtjs/mdc，用于在手风琴项中渲染 markdown。

<script setup lang="ts">
const items = [
  {
    label: 'What are the main considerations when upgrading to Nuxt UI v3?',
    icon: 'i-lucide-circle-help',
    content: 'The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.'
  },
  {
    label: 'Is Nuxt UI v3 compatible with standalone Vue projects?',
    icon: 'i-lucide-circle-help',
    content: 'Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started.'
  },
  {
    label: 'What about Nuxt UI Pro?',
    icon: 'i-lucide-circle-help',
    content: 'We\'ve also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We\'re actively working to finish the rewrite of all Nuxt UI Pro components..'
  },
  {
    label: 'Will Nuxt UI v3 work with other CSS frameworks like UnoCSS?',
    icon: 'i-lucide-circle-help',
    content: 'Nuxt UI v3 is currently designed to work exclusively with Tailwind CSS. While there\'s interest in UnoCSS support, implementing it would require significant changes to the theme structure due to differences in class naming conventions. As a result, we don\'t have plans to add UnoCSS support in v3.'
  },
  {
    label: 'How does Nuxt UI v3 handle accessibility?',
    icon: 'i-lucide-circle-help',
    content: 'Nuxt UI v3 enhances accessibility through Reka UI integration. This provides automatic ARIA attributes, keyboard navigation support, intelligent focus management, and screen reader announcements. While offering a strong foundation, proper implementation and testing in your specific use case remains crucial for full accessibility compliance. For more detailed information, refer to [Reka UI\'s accessibility documentation](https://reka-ui.com/docs/overview/accessibility).'
  },
  {
    label: 'What is the testing approach for Nuxt UI v3?',
    icon: 'i-lucide-circle-help',
    content: 'Nuxt UI v3 ensures reliability with 1000+ Vitest tests, covering core functionality and accessibility. This robust testing suite supports the library\'s stability and serves as a reference for developers.'
  },
  {
    label: 'Is this version stable and suitable for production use?',
    icon: 'i-lucide-circle-help',
    content: 'As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We\'re actively working on stabilization and welcome feedback from early adopters to improve the library. Feel free to report any issues you encounter on our [GitHub repository](https://github.com/nuxt/ui/issues).'
  }
]
</script>

<template>
  <UPageAccordion :items="items" default-value="1">
    <template #body="{ item }">
      <MDC :value="item.content" unwrap="p" />
    </template>
  </UPageAccordion>
</template>

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为何种元素或组件。

type

'multiple'

"multiple" | "single"

trailingIcon

appConfig.ui.icons.chevronDown

string

显示在触发器右侧的图标。

disabled

false

boolean

当为 true 时，阻止用户与手风琴及其所有项进行交互。

labelKey

'label'

string

用于获取项的标签的键。

items

AccordionItem[]

modelValue

string | string[]

活动项的受控值。

当你需要控制项的状态时使用。可以通过 v-model 进行绑定。

defaultValue

string | string[]

项的默认活动值。

当你不需要控制项的状态时使用。

collapsible

false

boolean

当类型为 "single" 时，允许在点击已打开项的触发器时关闭内容。当类型为 "multiple" 时，此属性无效。

unmountOnHide

true

boolean

当为 true 时，元素在关闭状态下将被卸载。

ui

{ base?: ClassNameValue; trigger?: ClassNameValue; body?: ClassNameValue; }

插槽

插槽类型
leading

{ item: AccordionItem & { slot?: string | undefined; }; index: number; open?: boolean; }

default

{ item: AccordionItem & { slot?: string | undefined; }; index: number; open?: boolean; }

trailing

{ item: AccordionItem & { slot?: string | undefined; }; index: number; open?: boolean; }

content

{ item: AccordionItem & { slot?: string | undefined; }; index: number; open?: boolean; }

body

{ item: AccordionItem & { slot?: string | undefined; }; index: number; open?: boolean; }

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    pageAccordion: {
      slots: {
        base: '',
        trigger: 'text-base',
        body: 'text-base text-muted'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        pageAccordion: {
          slots: {
            base: '',
            trigger: 'text-base',
            body: 'text-base text-muted'
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        pageAccordion: {
          slots: {
            base: '',
            trigger: 'text-base',
            body: 'text-base text-muted'
          }
        }
      }
    })
  ]
})

页面

一个用于页面布局的网格布局，包含左右两列。

页面锚点

一个用于在页面中显示的锚点列表。