使用场景
用于关联操作或分段操作。子按钮省略 type、size 时继承组设置；子按钮显式设置时覆盖继承。支持嵌套组合，属性变更保持响应式。
共享颜色与显式覆盖
一组按钮继承 primary 和 big；末项显式使用 danger 与 small。
共享颜色与显式覆盖
vue
<template>
<div class="example">
<AsamButtonGroup type="primary" size="big">
<AsamButton @click="action = '新建'"> 新建 </AsamButton>
<AsamButton @click="action = '复制'"> 复制 </AsamButton>
<AsamButton type="danger" size="small" @click="action = '删除'"> 删除 </AsamButton>
</AsamButtonGroup>
<output>操作：{{ action }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamButtonGroupBasicExample' });
import { ref } from 'vue';
import { AsamButton, AsamButtonGroup } from '@asam-ui/ui';
const action = ref('未选择');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamButtonGroup type="primary" size="big">
<AsamButton @click="action = '新建'"> 新建 </AsamButton>
<AsamButton @click="action = '复制'"> 复制 </AsamButton>
<AsamButton type="danger" size="small" @click="action = '删除'"> 删除 </AsamButton>
</AsamButtonGroup>
<output>操作：{{ action }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamButtonGroupBasicExample' });
import { ref } from 'vue';
import { AsamButton, AsamButtonGroup } from '@asam-ui/ui';
const action = ref('未选择');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>垂直排列
direction 控制水平或垂直布局；default 插槽放入组内按钮。组自身不声明独立事件或 expose。
垂直排列
vue
<template>
<div class="example">
<AsamButtonGroup direction="vertical" type="secondary">
<AsamButton> 上一步 </AsamButton>
<AsamButton> 当前步骤 </AsamButton>
<AsamButton> 下一步 </AsamButton>
</AsamButtonGroup>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamButtonGroupDirectionExample' });
import { AsamButton, AsamButtonGroup } from '@asam-ui/ui';
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<AsamButtonGroup direction="vertical" type="secondary">
<AsamButton> 上一步 </AsamButton>
<AsamButton> 当前步骤 </AsamButton>
<AsamButton> 下一步 </AsamButton>
</AsamButtonGroup>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamButtonGroupDirectionExample' });
import { AsamButton, AsamButtonGroup } from '@asam-ui/ui';
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档密度与继承
large / big / default / small 分别为四档密度。显式 size 覆盖继承；省略 size 时按组件、组、表单、ConfigProvider 到 default 解析。通过切换 provider 验证继承响应。
四档密度与继承
vue
<template>
<div class="example">
<div class="row">
<AsamButtonGroup size="large" v-bind="{ class: 'field', 'aria-label': 'large尺寸' }">
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
<AsamButtonGroup size="big" v-bind="{ class: 'field', 'aria-label': 'big尺寸' }">
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
<AsamButtonGroup
size="default"
v-bind="{ class: 'field', 'aria-label': 'default尺寸' }"
>
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
<AsamButtonGroup size="small" v-bind="{ class: 'field', 'aria-label': 'small尺寸' }">
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamButtonGroup v-bind="{ class: 'field', 'aria-label': '继承尺寸' }">
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
<div class="row">
<AsamButton @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton @click="density = 'big'"> 继承 big </AsamButton>
</div>
</div>
</AsamConfigProvider>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamButtonGroupSizesExample' });
import { ref } from 'vue';
import { AsamButtonGroup, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>vue
<template>
<div class="example">
<div class="row">
<AsamButtonGroup size="large" v-bind="{ class: 'field', 'aria-label': 'large尺寸' }">
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
<AsamButtonGroup size="big" v-bind="{ class: 'field', 'aria-label': 'big尺寸' }">
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
<AsamButtonGroup
size="default"
v-bind="{ class: 'field', 'aria-label': 'default尺寸' }"
>
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
<AsamButtonGroup size="small" v-bind="{ class: 'field', 'aria-label': 'small尺寸' }">
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
</div>
<AsamConfigProvider :size="density">
<div class="example">
<AsamButtonGroup v-bind="{ class: 'field', 'aria-label': '继承尺寸' }">
<AsamButton> 操作 </AsamButton>
<AsamButton> 更多 </AsamButton>
</AsamButtonGroup>
<div class="row">
<AsamButton @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton @click="density = 'big'"> 继承 big </AsamButton>
</div>
</div>
</AsamConfigProvider>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamButtonGroupSizesExample' });
import { ref } from 'vue';
import { AsamButtonGroup, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.field {
width: 100%;
max-width: 360px;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
ASAM 的四档密度与颜色在按钮组内继承；direction 控制布局，不能用旧 Button variant 为整组配置颜色。事件监听和实例状态放到组内 按钮。
API 阅读方式
下方 API 来自当前公开类型与运行默认值。默认值标为“未知 / 未声明”时，不代表 false、空值或未支持。省略 size 保留祖先上下文继承。组只声明 Props 和 default 插槽，没有独立事件或 Exposes。
API
属性 AsamButtonGroupProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | 用于控制该按钮组内按钮的大小 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | — |
type | 用于控制该按钮组内按钮的类型 | enum"" | "default" | "text" | "primary" | "gradient" | "secondary" | "accent" | "success" | "danger" | "warning" | "info" | "ghost"完整类型：AsamButtonType | undefined | — |
direction | 按水平或垂直方向排列按钮。 | enum"horizontal" | "vertical"完整类型："horizontal" | "vertical" | undefined | — |
插槽 AsamButtonGroupSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
关联组件
参数与事件补充说明
为子按钮提供共享尺寸密度与语义颜色。
参数与事件说明
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
type
必填：否；声明来源：ASAM 声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "default" / "text" / "primary" / "gradient" / "secondary" / "accent" / "success" / "danger" / "warning" / "info" / "ghost"
direction
必填：否；声明来源：ASAM 声明。
direction 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
AsamButtonGroupProps 公开类型视图
ts
import type { AsamButtonGroupProps, AsamControlSize, AsamButtonType } from '@asam-ui/ui';
// AsamButtonGroupProps
type PublicContract = {
readonly "size"?: AsamControlSize | undefined;
readonly "type"?: AsamButtonType | undefined;
readonly "direction"?: "horizontal" | "vertical" | undefined;
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamButtonGroupSlots 公开类型视图
ts
import type { AsamButtonGroupSlots } from '@asam-ui/ui';
// AsamButtonGroupSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
};