SPressButton <s-press-button>

एक toggle button जो दबा हुआ या बिना दबा हुआ रहता है, किसी mode या filter को चालू और बंद करने के लिए। SPressButton Shopify के Polaris <s-press-button> web component का typed Vue 3 wrapper है।

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

उदाहरण

SecondaryTertiaryDisabled

<script setup>
import { ref } from 'vue'
import { SPressButton } from 'polaris-vue-elements'

const pressed = ref(false)
</script>

<template>
  <!-- SPressButton is a toggle-style button (aria-pressed) — pressed/defaultPressed
       control the on/off state instead of a click counter. -->
  <SPressButton icon="star" accessibilityLabel="Favorite" :pressed="pressed" @click="pressed = !pressed" />
  <SPressButton variant="secondary">Secondary</SPressButton>
  <SPressButton variant="tertiary">Tertiary</SPressButton>
  <SPressButton disabled>Disabled</SPressButton>
</template>

Props

Prop	Type	विवरण
accessibilityLabel	string	Button का उद्देश्य या content बताने वाला label। screen readers जैसी assistive technologies इस्तेमाल करने वाले users को यह पढ़कर सुनाया जाएगा। इसका उपयोग तब करें जब केवल icon इस्तेमाल हो रहा हो या Button का text assistive technologies इस्तेमाल करने वाले users के लिए पर्याप्त संदर्भ न दे।
defaultPressed	boolean	क्या button डिफ़ॉल्ट रूप से pressed है।
disabled	boolean	Button को disable करता है, यानी उस पर click नहीं किया जा सकता और उसे focus नहीं मिल सकता।
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Button में दिखाए जाने वाले icon का type।
inlineSize	"auto" | "fill" | "fit-content"	Button की दिखाई देने वाली inline चौड़ाई। - auto: button का आकार surface और context पर निर्भर करता है। - fill: button उपलब्ध inline size का 100% घेरता है। - fit-content: button अपनी सामग्री को समाने के लिए आवश्यक न्यूनतम inline-size घेरता है।
lang	string	text की भाषा बताएँ। यह तब उपयोगी है जब text बाकी page से अलग भाषा में हो। इससे screen readers जैसी assistive technologies सही उच्चारण इस्तेमाल कर पाएँगी। values का reference ("subtag" label)
loading	boolean	background action चलने के दौरान content की जगह loading indicator दिखाता है। यह Button को disable भी करता है।
pressed	boolean	क्या button pressed है।
tone	"neutral"	दी जा रही जानकारी के उद्देश्य के आधार पर Button का tone सेट करता है।
variant	"secondary" | "tertiary"	Button का visual रूप बदलता है।

पढ़ने में आसानी के लिए ऊपर के कुछ type columns छोटे किए गए हैं; पूरा union library के generate किए गए TypeScript types (src/lib/generated/types.ts) में उपलब्ध है।

Events

Event	Type
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

इन्हें <SPressButton> पर @blur जैसे listeners से सुनें।

Slots

Slot	विवरण
default	PressButton की सामग्री।