ProseField

Document API parameters, props, and configuration options clearly.

Usage

A field, prop or parameter to display in your content.

name

string required

The description can be set as prop or in the default slot with full markdown support.

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

API

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-600 color-primary',
          wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
          required: 'rounded-sm bg-error/10 color-error px-1.5 py-0.5',
          type: 'rounded-sm bg-background-elevated color-text-toned px-1.5 py-0.5',
          description: 'mt-3 color-text-muted text-sm [&_code]:text-xs/4'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-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-600 color-primary',
              wrapper: 'flex-1 flex items-center gap-1.5 text-xs',
              required: 'rounded-sm bg-error/10 color-error px-1.5 py-0.5',
              type: 'rounded-sm bg-background-elevated color-text-toned px-1.5 py-0.5',
              description: 'mt-3 color-text-muted text-sm [&_code]:text-xs/4'
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Collapsible

Toggle content visibility with smooth expand and collapse animations.

FieldGroup

Group related fields together for comprehensive API documentation.