Collapsible

Learn how to use the ProseCollapsible component in your Nuxt app.

Wrap your content with the collapsible component to display a Collapsible in your content.

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

string

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?: ClassNameValue; trigger?: ClassNameValue; triggerIcon?: ClassNameValue; triggerLabel?: ClassNameValue; content?: ClassNameValue; }

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 focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
            'transition-colors'
          ],
          triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
          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 focus-visible:ring-2 focus-visible:ring-primary focus:outline-none',
                'transition-colors'
              ],
              triggerIcon: 'size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
              triggerLabel: 'truncate',
              content: '*:first:mt-2.5 *:last:mb-0 *:my-1.5'
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

CodeTree

Learn how to use the ProseCodeTree component in your Nuxt app.

Field

Learn how to use the ProseField component in your Nuxt app.