ButtonGroup 按钮组

AuButtonGroup 将一组相关操作组织成统一的操作单元。

连体按钮组

<template>
  <div class="button-group-connected-demo">
    <AuButtonGroup variant="connected">
      <AuButtonGroupItem
        v-for="action in actions"
        :key="action.key"
        :icon="action.icon"
        :loading="action.loading"
        :selected="selectedAction === action.key"
        @click="selectedAction = action.key"
      >
        {{ action.label }}
      </AuButtonGroupItem>
    </AuButtonGroup>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuButtonGroup, AuButtonGroupItem } from 'aurora-plus';
import {
  IconAdjustmentsHorizontal,
  IconBell,
  IconDots,
  IconLayoutSidebar,
} from 'aurora-plus/icons';
const actions = [
  { key: 'window', label: '窗口', icon: IconLayoutSidebar },
  { key: 'preferences', label: '偏好', icon: IconAdjustmentsHorizontal },
  { key: 'notifications', label: '同步中', icon: IconBell, loading: true },
  { key: 'more', label: '更多', icon: IconDots },
];
const selectedAction = ref('window');
</script>

分段选择

透明度100%

<template>
  <div class="button-group-segmented-demo">
    <div class="button-group-segmented-demo__heading">
      <strong>透明度</strong>
      <span>{{ selectedOpacity }}%</span>
    </div>
    <AuButtonGroup variant="segmented">
      <AuButtonGroupItem
        v-for="opacity in opacityOptions"
        :key="opacity"
        :selected="selectedOpacity === opacity"
        @click="selectedOpacity = opacity"
      >
        {{ opacity }}
      </AuButtonGroupItem>
    </AuButtonGroup>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuButtonGroup, AuButtonGroupItem } from 'aurora-plus';
const opacityOptions = [50, 60, 70, 80, 90, 100];
const selectedOpacity = ref(100);
</script>
<style scoped>
.button-group-segmented-demo {
  width: min(460px, 100%);
}
.button-group-segmented-demo__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--au-color-text-primary);
}
.button-group-segmented-demo__heading span {
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
  font-weight: var(--au-font-weight-semibold);
}
</style>

悬浮控制组

<template>
  <div class="button-group-floating-demo">
    <AuButtonGroup
      variant="floating"
      icon-only
    >
      <AuButtonGroupItem
        v-for="action in panelActions"
        :key="action.label"
        :icon="action.icon"
        :title="action.label"
      />
    </AuButtonGroup>
  </div>
</template>
<script setup>
import { AuButtonGroup, AuButtonGroupItem } from 'aurora-plus';
import { IconCode, IconLayoutSidebar, IconMinus } from 'aurora-plus/icons';
const panelActions = [
  { label: '收起面板', icon: IconMinus },
  { label: '切换视图', icon: IconLayoutSidebar },
  { label: '查看源码', icon: IconCode },
];
</script>

ButtonGroup API

Attributes

属性	说明	类型	可选值	默认值
variant	外观类型	string	connected / segmented / floating	connected
orientation	按钮排列方向	string	horizontal / vertical	horizontal
size	控制组尺寸	string	small / default / large	default
iconOnly	是否将直接子按钮统一为方形图标按钮	boolean	—	false
inverse	使用适合灰色遮罩等深色背景的反色材质	boolean	—	false

AuButtonGroupItem Attributes

属性	说明	类型	默认值
type	颜色类型：default / primary / success / info / warning / danger	string	default
selected	选中状态	boolean	—
selectedColor	选中时的文字颜色	string	''
nativeType	原生按钮类型：button / submit / reset	string	button
icon	图标组件	Component	null
disabled	禁用操作项	boolean	false
loading	显示加载状态并禁用操作项	boolean	false

AuButtonGroupItem Events

事件	参数	说明
click	(event)	点击操作项

Slots

插槽名	说明
default	一组 AuButtonGroupItem，也可包含以该操作项作为触发器的 AuPopover

AuButtonGroupItem Slots

插槽名	说明
default	操作项的文字内容
icon	自定义操作项图标
loading	自定义加载图标