Prosefield Bearbeiten

Dokumentieren Sie API-Parameter, Requisiten und Konfigurationsoptionen klar und deutlich.

Bearbeiten

Ein Feld, eine Stütze oder ein Parameter, der in Ihrem Inhalt angezeigt werden soll.

name

string required

Das description kann als Prop oder im Standard-Slot mit voller markdown-Unterstützung eingestellt werden.

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

API (Englisch)

Props Bearbeiten

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 Bearbeiten

Slot	Type
`default`	`{}`

Themes Bearbeiten

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

Changelog (englisch)

No recent changes

Collapsible

Toggle content visibility with smooth expand and collapse animations.

FieldGroup

Group related fields together for comprehensive API documentation.