字段组
将多个类似按钮的元素组合在一起。
用法
将多个Button组件包裹在 FieldGroup 中，将它们组合在一起。
<template>
<UFieldGroup>
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
</UFieldGroup>
</template>
尺寸
使用size属性来改变所有按钮的大小。
<template>
<UFieldGroup size="xl">
<UButton color="neutral" variant="subtle" label="Button" />
<UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
</UFieldGroup>
</template>
Orientation
使用orientation属性来改变按钮的排列方向。默认为horizontal（水平）。
<template>
<UFieldGroup orientation="vertical">
<UButton color="neutral" variant="subtle" label="Submit" />
<UButton color="neutral" variant="outline" label="Cancel" />
</UFieldGroup>
</template>
示例
带输入框
您可以在字段组中使用Input、InputMenu、Select SelectMenu等组件。
<template>
<UFieldGroup>
<UInput color="neutral" variant="outline" placeholder="Enter token" />
<UButton color="neutral" variant="subtle" icon="i-lucide-clipboard" />
</UFieldGroup>
</template>
带工具提示
您可以在字段组中使用Tooltip组件。
<template>
<UFieldGroup>
<UInput color="neutral" variant="outline" placeholder="Enter token" />
<UTooltip text="Copy to clipboard">
<UButton
color="neutral"
variant="subtle"
icon="i-lucide-clipboard"
/>
</UTooltip>
</UFieldGroup>
</template>
带下拉菜单
您可以在字段组中使用DropdownMenu组件。
<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'
const items: DropdownMenuItem[] = [
{
label: 'Team',
icon: 'i-lucide-users'
},
{
label: 'Invite users',
icon: 'i-lucide-user-plus',
children: [
{
label: 'Invite by email',
icon: 'i-lucide-send-horizontal'
},
{
label: 'Invite by link',
icon: 'i-lucide-link'
}
]
},
{
label: 'New team',
icon: 'i-lucide-plus'
}
]
</script>
<template>
<UFieldGroup>
<UButton color="neutral" variant="subtle" label="Settings" />
<UDropdownMenu :items="items">
<UButton
color="neutral"
variant="outline"
icon="i-lucide-chevron-down"
/>
</UDropdownMenu>
</UFieldGroup>
</template>
带徽章
您可以在字段组中使用Badge组件。
https://
<template>
<UFieldGroup>
<UBadge color="neutral" variant="outline" size="lg" label="https://" />
<UInput color="neutral" variant="outline" placeholder="www.example.com" />
</UFieldGroup>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
尺寸 |
|
|
orientation |
|
按钮的排列方向。 |
ui |
|
插槽
| 插槽 | 类型 |
|---|---|
default |
|
主题
app.config.ts
export default defineAppConfig({
ui: {
fieldGroup: {
base: 'relative',
variants: {
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
orientation: {
horizontal: 'inline-flex -space-x-px',
vertical: 'flex flex-col -space-y-px'
}
}
}
}
})
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: {
fieldGroup: {
base: 'relative',
variants: {
size: {
xs: '',
sm: '',
md: '',
lg: '',
xl: ''
},
orientation: {
horizontal: 'inline-flex -space-x-px',
vertical: 'flex flex-col -space-y-px'
}
}
}
}
})
]
})