SPressButton <s-press-button>

保持按下或未按下状态的切换按钮，用于开启或关闭某个模式或筛选条件。 SPressButton 是 Shopify Polaris <s-press-button> web component 的带类型 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	类型	说明
accessibilityLabel	string	描述 Button 用途或内容的标签。它会被屏幕阅读器等辅助技术读给用户。当按钮仅使用图标，或 Button 文本不足以为使用辅助技术的用户提供上下文时，请使用此项。
defaultPressed	boolean	按钮默认是否处于按下状态。
disabled	boolean	禁用 Button，使其无法被点击或获得焦点。
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Button 中显示的图标类型。
inlineSize	"auto" | "fill" | "fit-content"	Button 的显示内联宽度。 - auto：按钮尺寸取决于所在界面和上下文。 - fill：按钮占据 100% 的可用内联尺寸。 - fit-content：按钮占据容纳其内容所需的最小内联尺寸。
lang	string	指明文本的语言。当文本与页面其余部分使用不同语言时很有用。它能让屏幕阅读器等辅助技术使用正确的发音。取值参考（"subtag" 标签）
loading	boolean	在执行后台操作期间，用加载指示器替换内容。这也会禁用 Button。
pressed	boolean	按钮是否处于按下状态。
tone	"neutral"	根据所传达信息的意图设置 Button 的色调。
variant	"secondary" | "tertiary"	更改 Button 的视觉外观。

为便于阅读，上面部分类型列已被截断；完整的联合类型见库中生成的 TypeScript 类型（src/lib/generated/types.ts）。

Events

Event	类型
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

在 <SPressButton> 上使用 @blur 形式的监听器来监听这些事件。

Slots

Slot	说明
default	PressButton 的内容。