ProseField

Documente parâmetros de API, props e opções de configuração com clareza.

Uso

Um campo, prop ou parâmetro para exibir no seu conteúdo.

name

string required

A description pode ser definida como prop ou no slot padrão, com suporte total a 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

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`	`{}`

Tema

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 '@nitro/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

No recent changes

Collapsible

Alterne a visibilidade do conteúdo com animações suaves de expandir e recolher.

FieldGroup

Agrupe campos relacionados para uma documentação de API completa.