프로세필드 (ProseField)

API 매개변수, props 및 구성 옵션을 명확하게 문서화합니다.

Usage

내용에 표시할 필드, 소품 또는 매개 변수.

name

string required

description는 prop로 설정하거나 markdown를 완벽하게 지원하는 기본 슬롯에 설정할 수 있습니다.

::field{name="name" type="string" required}
The `description` can be set as prop or in the default slot with full **markdown** support.
::

API

Props (### Props)

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`name`		`string` The name of the field.
`type`		`string` Expected type of the field's value
`description`		`string` Description of the field
`required`		`boolean` Indicate whether the field is required
`ui`		`{ root?: SlotClass; container?: SlotClass; name?: SlotClass; wrapper?: SlotClass; required?: SlotClass; type?: SlotClass; description?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`

Theme 테마

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      field: {
        slots: {
          root: 'my-5',
          container: 'flex items-center gap-3 font-mono text-sm',
          name: 'font-semibold text-primary',
          wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
          required: 'rounded-sm bg-error/10 text-error px-1.5 py-0.5',
          type: 'rounded-sm bg-elevated text-toned px-1.5 py-0.5',
          description: 'mt-3 text-muted text-sm [&_code]:text-xs/4'
        }
      }
    }
  }
})

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: {
          field: {
            slots: {
              root: 'my-5',
              container: 'flex items-center gap-3 font-mono text-sm',
              name: 'font-semibold text-primary',
              wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
              required: 'rounded-sm bg-error/10 text-error px-1.5 py-0.5',
              type: 'rounded-sm bg-elevated text-toned px-1.5 py-0.5',
              description: 'mt-3 text-muted text-sm [&_code]:text-xs/4'
            }
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

Collapsible

Toggle content visibility with smooth expand and collapse animations.

FieldGroup

Group related fields together for comprehensive API documentation.