ButtonGroup

GitHub
将多个类似按钮的元素组合在一起。

用法

将多个 Button 包装在 ButtonGroup 中，将它们组合在一起。

<template>
  <UButtonGroup>
    <UButton color="neutral" variant="subtle" label="Button" />
    <UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
  </UButtonGroup>
</template>

尺寸

使用 size 属性来改变所有按钮的尺寸。

<template>
  <UButtonGroup size="xl">
    <UButton color="neutral" variant="subtle" label="Button" />
    <UButton color="neutral" variant="outline" icon="i-lucide-chevron-down" />
  </UButtonGroup>
</template>

方向

使用 orientation 属性来改变按钮的方向。默认为 horizontal。

<template>
  <UButtonGroup orientation="vertical">
    <UButton color="neutral" variant="subtle" label="Submit" />
    <UButton color="neutral" variant="outline" label="Cancel" />
  </UButtonGroup>
</template>

示例

带有输入框

您可以在按钮组中使用 Input、InputMenu、Select、SelectMenu 等组件。

<template>
  <UButtonGroup>
    <UInput color="neutral" variant="outline" placeholder="Enter token" />

    <UButton color="neutral" variant="subtle" icon="i-lucide-clipboard" />
  </UButtonGroup>
</template>

带有提示框

您可以在按钮组中使用 Tooltip。

<template>
  <UButtonGroup>
    <UInput color="neutral" variant="outline" placeholder="Enter token" />

    <UTooltip text="Copy to clipboard">
      <UButton
        color="neutral"
        variant="subtle"
        icon="i-lucide-clipboard"
      />
    </UTooltip>
  </UButtonGroup>
</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>
  <UButtonGroup>
    <UButton color="neutral" variant="subtle" label="Settings" />

    <UDropdownMenu :items="items">
      <UButton
        color="neutral"
        variant="outline"
        icon="i-lucide-chevron-down"
      />
    </UDropdownMenu>
  </UButtonGroup>
</template>

带有徽章

您可以在按钮组中使用 Badge。

https://
<template>
  <UButtonGroup>
    <UBadge color="neutral" variant="outline" size="lg" label="https://" />

    <UInput color="neutral" variant="outline" placeholder="www.example.com" />
  </UButtonGroup>
</template>

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

尺寸

'md'

"md" | "xs" | "sm" | "lg" | "xl"

方向

'horizontal'

"horizontal" | "vertical"

按钮布局的方向。

ui

{}

插槽

插槽类型
default

{}

主题

app.config.ts
export default defineAppConfig({
  ui: {
    buttonGroup: {
      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: {
        buttonGroup: {
          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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        buttonGroup: {
          base: 'relative',
          variants: {
            size: {
              xs: '',
              sm: '',
              md: '',
              lg: '',
              xl: ''
            },
            orientation: {
              horizontal: 'inline-flex -space-x-px',
              vertical: 'flex flex-col -space-y-px'
            }
          }
        }
      }
    })
  ]
})

Button

可以作为链接或触发操作的按钮元素。

Calendar

一个用于选择单日期、多日期或日期范围的日历组件。