SChip `<s-chip>`

Một nhãn tĩnh cho tag hoặc thuộc tính, có thể gỡ bỏ. SChip là Vue 3 wrapper có type cho web component <s-chip> của Shopify Polaris.

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

Best practices

Dùng chip để mô tả, không phải để hành động. Chip phù hợp cho tag, trạng thái và danh mục cho người bán biết điều gì đó về nội dung. Chúng không phải button, nên khi chip cần được nhấp hoặc đóng, hãy dùng SClickableChip.
Giữ nhãn ngắn. Văn bản ngắn như "Featured" hay "On sale" có thể đọc trong nháy mắt, còn nhãn dài làm chậm việc đọc lướt và có thể bị cắt.
Chọn độ nổi bật phù hợp với nội dung. Dùng color="subdued" cho metadata phụ và màu mặc định cho tag và danh mục thông thường.
Đặt chip cạnh thứ nó mô tả. Giữ chip bên cạnh mục mà nó gắn nhãn, và trong danh sách hãy đặt chúng ở cùng vị trí trên mỗi hàng để người bán đọc lướt nhanh.
Thêm icon khi có ích. Một SIcon trong slot graphic có thể giúp nhận ra trạng thái hoặc danh mục quen thuộc dễ hơn.

vue

<SChip>
  <SIcon slot="graphic" type="star" />
  Featured
</SChip>
<SChip color="subdued">Imported</SChip>

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

Ví dụ

Snowboard

Removable chip

vue

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

const removed = ref(false)
</script>

<template>
  <!-- SChip's `graphic` slot only accepts an SIcon. -->
  <SChip>
    <template #graphic>
      <SIcon type="product" />
    </template>
    Snowboard
  </SChip>

  <!-- SChip has no `hidden` prop (unlike SClickableChip) — use v-if to remove it
       from the DOM when `remove` fires. -->
  <SChip v-if="!removed" color="strong" removable @remove="removed = true">
    Removable chip
  </SChip>
</template>

Props

Prop	Kiểu	Mô tả
`accessibilityLabel`	`string`	Nhãn mô tả mục đích hoặc nội dung của component cho các công nghệ hỗ trợ như trình đọc màn hình. Dùng nhãn này để cung cấp thêm ngữ cảnh khi riêng nội dung hiển thị chưa thể hiện rõ mục đích của component.
`color`	`"subdued" \| "base" \| "strong"`	Mức nhấn mạnh màu, kiểm soát cường độ thị giác.
`removable`	`boolean`	Chip có thể xóa được hay không.

Events

Event	Kiểu
`remove`	`CustomEvent`

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

Slots

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

SChip <s-chip> ​

Best practices ​

Ví dụ ​

Props ​

Events ​

Slots ​