Envolva vários Button dentro de um FieldGroup para agrupá-los.
<template>
<NFieldGroup>
<NButton color="neutral" variant="subtle" label="Button" />
<NButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
</NFieldGroup>
</template>
Use a prop size para alterar o tamanho de todos os botões.
<template>
<NFieldGroup size="xl">
<NButton color="neutral" variant="subtle" label="Button" />
<NButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
</NFieldGroup>
</template>
Use a prop orientation para alterar a orientação dos botões. O padrão é horizontal.
<template>
<NFieldGroup orientation="vertical">
<NButton color="neutral" variant="subtle" label="Submit" />
<NButton color="neutral" variant="outline" label="Cancel" />
</NFieldGroup>
</template>
Você pode usar componentes como Input, InputMenu, Select SelectMenu, etc. dentro de um field group.
<template>
<NFieldGroup>
<NInput color="neutral" variant="outline" placeholder="Enter token" />
<NButton color="neutral" variant="subtle" icon="i-lucide-clipboard" />
</NFieldGroup>
</template>
Você pode usar um Tooltip dentro de um field group.
Você pode usar um DropdownMenu dentro de um field group.
Você pode usar um Badge dentro de um field group.
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
orientation | 'horizontal' | "horizontal" | "vertical"The orientation the buttons are laid out. |
ui | {} |
| Slot | Type |
|---|---|
default | {} |
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'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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'
}
}
}
}
})
]
})