作者头像

按钮组组件 # ButtonGroup link

link

ButtonGroup 是一个用于聚合多个 MaterialButton 的容器组件。它支持灵活的布局切换、统一的属性默认值配置以及便捷的配置式生成。

核心特性 link

link
  • 布局自适应：支持水平（Horizontal）和垂直（Vertical）两种排列方式，自动处理子按钮的圆角过渡。
  • 属性继承：支持在组级别设置默认的尺寸、颜色、图标等，简化重复配置。
  • 类型预设：内置 download 和 normal 类型，自动匹配 Material 风格的颜色与图标。
  • 配置驱动：通过简单的数组配置即可生成复杂的按钮组合。

组件属性 (Props) link

link
属性名类型默认值可选值说明
linksGroupItem[][]-按钮项配置数组
layoutstring"horizontal""horizontal", "vertical"布局方向
sizestring"s""xs", "s", "m", "l", "xl"默认按钮尺寸
colorstring--默认按钮颜色变体
iconstring--默认按钮图标
targetstring--默认链接打开方式
ariaLabelstring--容器的无障碍标签

组件事件 (Emits) link

link
事件名回调参数说明
@click(event: Event, item: GroupItem, index: number)当组内任意按钮被点击时触发

配置项定义 (GroupItem) link

link
属性名类型说明
labelstring按钮显示的文本内容
linkstring(可选) 跳转链接。提供时渲染为 <a>
typestring(可选) 预设类型：download (下载), normal (通用跳转)
iconstring(可选) 图标名称
colorstring(可选) 颜色变体
sizestring(可选) 按钮尺寸
targetstring(可选) 打开方式
ariaLabelstring(可选) 无障碍标签
onClickFunction(可选) 独立的点击回调

使用示例 link

link

1. 混合图标与文本 link

link
vue
<ButtonGroup
  size="m"
  :links="[
    { id: 'prev', icon: 'chevron_left', ariaLabel: '上一页' },
    { id: 'index', label: '1 / 5', color: 'tonal' },
    { id: 'next', icon: 'chevron_right', ariaLabel: '下一页' },
  ]"
/>

2. 链接跳转 link

link
vue
<ButtonGroup
  target="_blank"
  :links="[
    { label: 'GitHub', link: 'https://github.com', icon: 'code' },
    { label: '首页', link: '/', icon: 'home' },
  ]"
/>
codeGitHubhome首页