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의 시각적 모양을 변경합니다.

위의 일부 타입 열은 읽기 쉽도록 축약되었습니다. 전체 union은 라이브러리에서 생성된 TypeScript 타입(src/lib/generated/types.ts)에 있습니다.

Events

Event	타입
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

<SPressButton>에서 @blur 형식의 리스너로 이 events를 수신하세요.

Slots

Slot	설명
default	PressButton의 콘텐츠입니다.