SClickableChip <s-clickable-chip>

Một chip tương tác có thể nhấp, mở như liên kết hoặc gỡ bỏ — hữu ích cho bộ lọc và tag đã áp dụng. SClickableChip là Vue 3 wrapper có type cho web component <s-clickable-chip> của Shopify Polaris.

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

Best practices

• Giữ nhãn ngắn. Mục tiêu là một đến ba từ, ví dụ "Electronics" hay "Summer sale".
• Chọn color theo mức độ quan trọng. Dùng color="subdued" cho chip phụ và giữ giá trị mặc định "base" cho các lựa chọn thông thường.
• Làm cho thao tác xóa dễ nhận ra. Khi chip là removable, hãy kiểm tra rằng nút xóa của nó hiển thị rõ và có trạng thái hover và focus rõ ràng.
• Nhóm các chip liên quan. Bố trí chúng trong một SStack inline để chúng thẳng hàng theo chiều ngang với khoảng cách đều nhau.

<SStack direction="inline" gap="small-200">
  <SClickableChip>Electronics</SClickableChip>
  <SClickableChip color="subdued" removable>Summer sale</SClickableChip>
</SStack>

Xem best practices của Shopify cho <s-clickable-chip> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

Visit Polaris Removable chip

<script setup>
import { ref } from 'vue'
import { SClickableChip, SIcon } from 'polaris-vue-elements'

const removed = ref(false)
</script>

<template>
  <!-- SClickableChip is a Chip that can act as a link (href) or command trigger,
       and its `graphic` slot only accepts an SIcon. -->
  <SClickableChip href="https://polaris.shopify.com" target="_blank">
    <template #graphic>
      <SIcon type="external" />
    </template>
    Visit Polaris
  </SClickableChip>

  <!-- removable chips fire `remove`; drive `hidden` from app state to actually hide it. -->
  <SClickableChip removable :hidden="removed" @remove="removed = true">
    Removable chip
  </SClickableChip>
</template>

Props

Prop	Kiểu	Mô tả
accessibilityLabel	string	Nhãn mô tả mục đích hoặc nội dung của Chip. Nhãn sẽ được đọc cho người dùng công nghệ hỗ trợ như trình đọc màn hình.
color	"subdued" | "base" | "strong"	Điều chỉnh màu sắc đậm hơn hoặc nhạt hơn.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Đặt hành động mà commandFor sẽ thực hiện khi phần tử có thể nhấp này được kích hoạt. Xem tài liệu của từng component để biết các hành động mà chúng hỗ trợ. - --auto: hành động mặc định cho component đích. - --show: hiển thị component đích. - --hide: ẩn component đích. - --toggle: bật/tắt component đích. - --copy: sao chép ClipboardItem đích.
commandFor	string	ID của một component sẽ phản hồi khi component này được kích hoạt (ví dụ: nhấp). Xem command để biết cách điều khiển hành vi của component đích.
disabled	boolean	Chip có bị vô hiệu hóa hay không, ngăn mọi tương tác của người dùng.
hidden	boolean	Chip có bị ẩn khỏi tầm nhìn hay không. Khi dùng pattern controlled component với chip removable, hãy cập nhật thuộc tính này khi event remove được kích hoạt. Với chip không thể xóa, hãy bật/tắt thủ công thuộc tính này để hiện hoặc ẩn chip.
href	string	URL để điều hướng tới khi được nhấp. Event click được kích hoạt trước, sau đó mới điều hướng. Nếu commandFor cũng được đặt, command sẽ được thực thi thay cho việc điều hướng.
interestFor	string	ID của một component sẽ phản hồi khi có sự chú ý (ví dụ: hover và focus) trên component này.
removable	boolean	Chip có hiển thị nút xóa để loại bỏ hay không. Khi được nhấp, callback remove được kích hoạt.

Events

Event	Kiểu
afterhide	CustomEvent
click	MouseEvent
remove	CustomEvent

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

Slots

Slot	Mô tả
default	Nhãn văn bản hiển thị bên trong chip, đại diện cho bộ lọc, thẻ hoặc mục có thể chọn mang tính tương tác.
graphic	Icon tùy chọn hiển thị ở đầu chip. Chỉ chấp nhận các component icon.