SChoiceList <s-choice-list>

Một nhóm radio button hoặc checkbox để chọn một hoặc nhiều tùy chọn. SChoiceList là Vue 3 wrapper có type cho web component <s-choice-list> của Shopify Polaris.

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

Best practices

• Chọn chế độ chọn phù hợp với các lựa chọn. Giữ chế độ chọn một cho các lựa chọn loại trừ lẫn nhau, như phương thức thanh toán hoặc tốc độ giao hàng, và đặt multiple khi người bán có thể chọn nhiều hơn một.
• Viết nhãn lựa chọn mô tả kết quả. "Email notifications for new orders" nói được nhiều hơn "Email". Giữ nhãn ngắn, nhưng đủ rõ để tự đứng độc lập.
• Viết label dưới dạng câu hỏi hoặc câu khẳng định. Một tiêu đề như "Which shipping method?" hay "Select notification preferences" cho người bán biết nhiều hơn một từ mơ hồ như "Options" hay "Settings".
• Giải thích lựa chọn phức tạp trong slot details. Thêm details cho từng SChoice khi người bán cần hiểu việc chọn nó có ý nghĩa gì.
• Viết thông báo error cụ thể. Nói chính xác cho người bán điều gì còn thiếu, ví dụ "Select at least one notification preference", thay vì một câu chung chung như "Required field".

<SChoiceList label="Which shipping method?">
  <SChoice value="standard">Standard shipping</SChoice>
  <SChoice value="express">
    Express shipping
    <template #details>
      <SText>Costs more, but orders arrive in 1–2 business days.</SText>
    </template>
  </SChoice>
</SChoiceList>

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

Ví dụ

EmailSMSPush notification

Selected: (none)

<script setup>
import { ref } from 'vue'
import { SChoiceList, SChoice } from 'polaris-vue-elements'

const value = ref([])
</script>

<template>
  <SChoiceList label="Notify me by" multiple v-model="value">
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

v-model

v-model trên <SChoiceList> gắn với property values và lắng nghe DOM event change.

<SChoiceList v-model="value" />

tương đương với:

<SChoiceList :values="value" @change="value = $event.target.values" />

Props

Prop	Kiểu	Mô tả
details	any	Văn bản bổ sung cung cấp ngữ cảnh hoặc hướng dẫn cho trường. Văn bản này được hiển thị cùng với trường và nhãn của nó để cung cấp thêm thông tin hoặc chỉ dẫn cho người dùng. Văn bản này cũng được cung cấp cho người dùng trình đọc màn hình.
disabled	boolean	Trường có bị vô hiệu hóa hay không, ngăn mọi tương tác của người dùng. Khi là true, thuộc tính disabled trên mọi lựa chọn con sẽ bị bỏ qua.
error	any	Báo lỗi cho người dùng. Trường sẽ được áp dụng kiểu hiển thị riêng để thông báo các vấn đề cần được giải quyết ngay.
label	any	Nội dung dùng làm nhãn của trường.
labelAccessibilityVisibility	"visible" | "exclusive"	Thay đổi khả năng hiển thị của nhãn của component. - visible: nhãn hiển thị với mọi người dùng. - exclusive: nhãn bị ẩn về mặt thị giác nhưng vẫn nằm trong cây trợ năng (accessibility tree).
multiple	boolean	Có cho phép chọn nhiều lựa chọn hay không.
name	string	Định danh cho trường, là duy nhất trong form chứa nó gần nhất.
values	string[]	Mảng các value của những option đã chọn. Đây là prop tiện lợi để đặt prop selected trên các option con.

Events

Event	Kiểu
change	Event
input	Event

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

Slots

Slot	Mô tả
default	Các lựa chọn mà người dùng có thể chọn. Chấp nhận các component choice.