PageAccordion^专业版

一个预设样式的手风琴组件，用于在您的页面中显示。

用法

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.cn/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; } & { root?: ClassNameValue; item?: ClassNameValue; header?: ClassNameValue; trigger?: ClassNameValue; content?: ClassNameValue; body?: ClassNameValue; leadingIcon?: ClassNameValue; trailingIcon?: ClassNameValue; label?: ClassNameValue; }`

插槽

插槽	类型
`前置`	`{ item: AccordionItem; index: number; open: boolean; }`
`default`	`{ item: AccordionItem; index: number; open: boolean; }`
`尾部`	`{ item: AccordionItem; index: number; open: boolean; }`
`内容`	`{ item: AccordionItem; index: number; open: boolean; }`
`主体`	`{ item: AccordionItem; 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'
          }
        }
      }
    })
  ]
})

页面

一种带有左右列的页面网格布局。

页面锚点

页面中显示的锚点列表。

PageAccordion专业版

用法

示例

带有 Markdown 内容

API

属性

插槽

主题

PageAccordion^专业版