SButtonGroup <s-button-group>

Sắp xếp một nhóm nút liên quan cạnh nhau, chẳng hạn một hành động chính và các hành động phụ của nó. SButtonGroup là Vue 3 wrapper có type cho web component <s-button-group> của Shopify Polaris.

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

Best practices

• Gom các hành động liên quan lại với nhau. Nhóm các lời kêu gọi hành động thuộc cùng một tác vụ để người bán thấy được các lựa chọn và mối liên hệ giữa chúng.
• Giữ thứ bậc thị giác. Dùng variant="primary" cho button của hành động chính và variant="secondary" hoặc variant="tertiary" cho các hành động phụ để định hướng sự chú ý.
• Đừng thêm quá nhiều button. Một hàng dài các lựa chọn khiến người bán bị choáng ngợp và khó quyết định hơn.
• Dùng nhóm phân đoạn cho các nút chuyển đổi. Với các lựa chọn liên quan chặt chẽ, như chuyển chế độ xem hoặc bộ lọc, đặt gap="none" để nối các button thành một segmented control.
• Tách riêng hành động phá hủy. Đặt chúng ở vị trí có chủ đích và gán tone="critical" để khó bị kích hoạt nhầm.

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

Xem best practices của Shopify cho <s-button-group> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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	Kiểu	Mô tả
accessibilityLabel	string	Nhãn mô tả mục đích hoặc nội dung của component cho các công nghệ hỗ trợ như trình đọc màn hình. Dùng nhãn này để cung cấp thêm ngữ cảnh khi riêng nội dung hiển thị chưa thể hiện rõ mục đích của component.
gap	"base" | "none"	Khoảng cách giữa các nút trong nhóm. - base: Khoảng cách tiêu chuẩn, tạo sự phân tách rõ ràng giữa các nút. - none: Không có khoảng cách, tạo thành nhóm nút liền nhau.

Slots

Slot	Mô tả
default	Các nút được hiển thị bên trong component button group, được sắp xếp cùng nhau thành một tập hợp thống nhất các hành động liên quan.
primary-action	Hành động chính của nhóm này, hiển thị với mức nhấn mạnh thị giác cao. Chấp nhận một button duy nhất có variant="primary". Dùng cho hành động chính mà bạn muốn người dùng thực hiện. Không thể dùng khi gap="none".
secondary-actions	Các hành động hỗ trợ được hiển thị kém nổi bật hơn hành động chính. Chấp nhận một hoặc nhiều component button với variant="secondary" hoặc variant="auto". Dùng cho các hành động thay thế hoặc ít quan trọng hơn.