SPressButton <s-press-button>

Một nút bật/tắt giữ trạng thái được nhấn hoặc không, dùng để bật và tắt một chế độ hoặc bộ lọc. SPressButton là Vue 3 wrapper có type cho web component <s-press-button> của Shopify Polaris.

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

Ví dụ

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	Kiểu	Mô tả
accessibilityLabel	string	Nhãn mô tả mục đích hoặc nội dung của Button. Nhãn sẽ được đọc cho người dùng công nghệ hỗ trợ như trình đọc màn hình. Dùng nhãn này khi chỉ dùng icon hoặc khi văn bản của Button không đủ ngữ cảnh cho người dùng công nghệ hỗ trợ.
defaultPressed	boolean	Nút có ở trạng thái được nhấn theo mặc định hay không.
disabled	boolean	Vô hiệu hóa Button, nghĩa là không thể nhấp hoặc nhận focus.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Loại icon hiển thị trong Button.
inlineSize	"auto" | "fill" | "fit-content"	Chiều rộng inline hiển thị của Button. - auto: kích thước của nút phụ thuộc vào bề mặt và ngữ cảnh. - fill: nút sẽ chiếm 100% kích thước inline khả dụng. - fit-content: nút sẽ chiếm kích thước inline tối thiểu cần thiết để vừa nội dung.
lang	string	Chỉ định ngôn ngữ của văn bản. Hữu ích khi văn bản có ngôn ngữ khác với phần còn lại của trang. Điều này cho phép các công nghệ hỗ trợ như trình đọc màn hình phát âm đúng. Tham khảo các giá trị (nhãn "subtag")
loading	boolean	Thay nội dung bằng chỉ báo đang tải trong khi một hành động chạy nền đang được thực hiện. Điều này cũng vô hiệu hóa Button.
pressed	boolean	Nút có đang ở trạng thái được nhấn hay không.
tone	"neutral"	Đặt tone của Button dựa trên mục đích của thông tin được truyền tải.
variant	"secondary" | "tertiary"	Thay đổi giao diện trực quan của Button.

Một số cột kiểu ở trên đã được rút gọn cho dễ đọc; union đầy đủ có trong type TypeScript được generate của thư viện (src/lib/generated/types.ts).

Events

Event	Kiểu
blur	FocusEvent
click	MouseEvent
focus	FocusEvent

Lắng nghe các event này bằng listener dạng @blur trên <SPressButton>.

Slots

Slot	Mô tả
default	Nội dung của PressButton.