散文可折叠

GitHub
使用平滑的展开和折叠动画切换内容可见性。

用法

使用collapsible组件包装内容，以在内容中显示Collapsible。

::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::

API

Props

Prop Default Type
icon
appConfig.ui.icons.chevronDown
any

The icon displayed to toggle the collapsible.

name
t('prose.collapsible.name')
string

The name displayed in the trigger label.

openText
t('prose.collapsible.openText')
string

The text displayed when the collapsible is open.

closeText
t('prose.collapsible.closeText')
string

The text displayed when the collapsible is closed.

ui
{ root?: SlotClass; trigger?: SlotClass; triggerIcon?: SlotClass; triggerLabel?: SlotClass; content?: SlotClass; } & { root?: SlotClass; content?: SlotClass; }

老虎机

Slot Type
default
{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    prose: {
      collapsible: {
        slots: {
          root: 'my-5',
          trigger: [
            'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm outline-primary/25 focus-visible:outline-3',
            'transition-colors'
          ],
          triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none',
          triggerLabel: 'truncate',
          content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
        }
      }
    }
  }
})
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({
      ui: {
        prose: {
          collapsible: {
            slots: {
              root: 'my-5',
              trigger: [
                'group relative rounded-xs inline-flex items-center gap-1.5 text-muted hover:text-default text-sm outline-primary/25 focus-visible:outline-3',
                'transition-colors'
              ],
              triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200 ease-out motion-reduce:transition-none',
              triggerLabel: 'truncate',
              content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

CodeTree

Visualize file and folder structures with syntax-highlighted code.

Field

Document API parameters, props, and configuration options clearly.