SButtonGroup <s-button-group>

将一组相关按钮排列在一起，例如一个主要操作及其次要操作。 SButtonGroup 是 Shopify Polaris <s-button-group> web component 的带类型 Vue 3 wrapper。

import { SButtonGroup } from 'polaris-vue-elements'

最佳实践

• 将相关操作放在一起。 把属于同一任务的行动号召分为一组，让商家能看到可选项以及它们之间的关系。
• 保持视觉层级。 对主要操作的按钮使用 variant="primary"，对辅助操作使用 variant="secondary" 或 variant="tertiary"，以引导注意力。
• 不要添加过多按钮。 一长排选项会让商家无所适从，更难做出决定。
• 对切换类选项使用分段按钮组。 对于紧密相关的选项（例如切换视图或筛选条件），设置 gap="none" 将按钮合并为一个分段控件。
• 将破坏性操作单独区分。 有意识地安排它们的位置，并设置 tone="critical"，使其不容易被误触。

<SButtonGroup gap="none">
  <SButton>List</SButton>
  <SButton>Grid</SButton>
</SButtonGroup>

参阅 Shopify 关于 <s-button-group> 的最佳实践（英文）以获取完整指南。

示例

SaveCancelDiscard

ListGrid

<script setup>
import { SButton, SButtonGroup, SPressButton } from 'polaris-vue-elements'
</script>

<template>
  <!-- primary-action accepts a single variant="primary" button; secondary-actions
       accepts Button (variant "secondary" or "auto") and PressButton (variant
       "secondary", its default) elements. The default slot is NOT rendered by the
       underlying <s-button-group> — content without one of these slots silently
       disappears. -->
  <SButtonGroup>
    <template #primary-action>
      <SButton variant="primary">Save</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Cancel</SButton>
      <SButton variant="secondary">Discard</SButton>
    </template>
  </SButtonGroup>

  <!-- Segmented toggle: gap="none" joins the buttons. primary-action is not
       supported with gap="none", so every button goes in secondary-actions. -->
  <SButtonGroup gap="none" accessibilityLabel="View style">
    <template #secondary-actions>
      <SPressButton>List</SPressButton>
      <SPressButton pressed>Grid</SPressButton>
    </template>
  </SButtonGroup>
</template>

Props

Prop	类型	说明
accessibilityLabel	string	为屏幕阅读器等辅助技术描述组件用途或内容的标签。当仅凭可见内容无法清楚传达组件用途时，可用它提供额外的上下文。
gap	"base" | "none"	组内按钮之间的间距。 - base：标准间距，在按钮之间提供清晰的视觉分隔。 - none：无间距，形成相连的按钮组。

Slots

Slot	说明
default	显示在按钮组组件中的按钮，它们排列在一起，构成一组相关操作。
primary-action	该组的主操作，以较高的视觉强调显示。接受单个 variant="primary" 的按钮。用于希望用户执行的首要操作。当 gap="none" 时不能使用。
secondary-actions	强调程度低于主要操作的辅助操作。接受一个或多个 variant="secondary" 或 variant="auto" 的按钮组件。用于替代操作或不太关键的操作。