SButtonGroup <s-button-group>

संबंधित buttons के एक समूह को साथ में रखता है, जैसे एक primary action और उसके secondary actions। SButtonGroup Shopify के Polaris <s-button-group> web component का typed Vue 3 wrapper है।

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

Best practices

• संबंधित actions को साथ रखें। एक ही काम से जुड़े calls to action को समूह में रखें, ताकि merchants अपने विकल्प और उनके आपसी संबंध देख सकें।
• Visual hierarchy बनाए रखें। ध्यान सही दिशा में ले जाने के लिए मुख्य action वाले button पर variant="primary" और सहायक buttons पर variant="secondary" या variant="tertiary" इस्तेमाल करें।
• बहुत ज़्यादा buttons न जोड़ें। विकल्पों की लंबी कतार merchants को उलझा देती है और फ़ैसला लेना मुश्किल बना देती है।
• Toggles के लिए segmented group इस्तेमाल करें। आपस में गहराई से जुड़े विकल्पों के लिए, जैसे views या filters बदलना, gap="none" सेट करें ताकि buttons जुड़कर एक segmented control बन जाएँ।
• Destructive actions को अलग रखें। उन्हें सोच-समझकर रखें और tone="critical" दें, ताकि वे गलती से ट्रिगर न हों।

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

सभी सुझावों के लिए <s-button-group> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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	Type	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies के लिए component का उद्देश्य या content बताने वाला label। जब केवल दिखाई देने वाला content component का उद्देश्य स्पष्ट रूप से न बताए, तब अतिरिक्त संदर्भ देने के लिए इसका उपयोग करें।
gap	"base" | "none"	group में buttons के बीच की spacing। - base: सामान्य spacing जो buttons के बीच स्पष्ट visual अलगाव देती है। - none: कोई spacing नहीं, जिससे जुड़ा हुआ button group बनता है।

Slots

Slot	विवरण
default	button group component के भीतर दिखाए जाने वाले buttons, जिन्हें संबंधित actions के एक सुसंगत सेट के रूप में एक साथ रखा जाता है।
primary-action	इस group का मुख्य action, जो उच्च visual emphasis के साथ दिखाया जाता है। variant="primary" वाला एक button स्वीकार करता है। इसका उपयोग उस प्राथमिक action के लिए करें जो आप चाहते हैं कि उपयोगकर्ता करें। gap="none" होने पर इसका उपयोग नहीं किया जा सकता।
secondary-actions	primary action की तुलना में कम ज़ोर के साथ दिखाए जाने वाले सहायक actions। variant="secondary" या variant="auto" वाले एक या अधिक button components स्वीकार करता है। इनका उपयोग वैकल्पिक या कम महत्वपूर्ण actions के लिए करें।