Field
清晰地展示文档 API 参数、props 和配置选项。
用法
用于在内容中显示的字段、prop 或参数。
name
字符串 必需
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
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
name |
字段的名称。 | |
type |
字段值的预期类型 | |
description |
字段的描述 | |
required |
指示字段是否必需 | |
ui |
|
插槽
| 插槽 | 类型 |
|---|---|
default |
|
主题
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'
}
}
}
}
})
]
})