ProseCollapable (프로스 축소 가능)

Github (GitHub)
부드러운 확장 및 축소 애니메이션을 사용하여 내용 가시성을 전환합니다.

Usage

collapsible 구성 요소를 사용하여 내용에 [Collapsiblexph03x/docs/components/collapsible)를 표시합니다.

::collapsible

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

::

API

Props (### 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; }

Slots

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'
            }
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

CodeTree

Visualize file and folder structures with syntax-highlighted code.

Field

Document API parameters, props, and configuration options clearly.