ProseCollapsible

スムーズな展開/折りたたみアニメーションでコンテンツの表示を切り替えます。

使用法

コンテンツをcollapsibleコンポーネントでラップして、Collapsibleをコンテンツに表示します。

プロップ	デフォルト	タイプ
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

::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.