SChoice <s-choice>

Một tùy chọn bên trong choice list. SChoice là Vue 3 wrapper có type cho web component <s-choice> của Shopify Polaris.

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

Ví dụ

<SChoice> doesn't render on its own — it's an individual choice within an <SChoiceList>. Its value prop is what feeds the parent's values array (bound via v-model), and its default slot is the choice label.

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">
    <!-- Each SChoice's `value` is collected into SChoiceList's v-model array -->
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

Props

Prop	Kiểu	Mô tả
accessibilityLabel	string	Nhãn dành cho người dùng công nghệ hỗ trợ như trình đọc màn hình. Khi được đặt, mọi phần tử con hoặc label được cung cấp sẽ không được đọc lên. Nhãn này cũng có thể dùng để hiển thị một control không có nhãn hiển thị, trong khi vẫn cung cấp ngữ cảnh cho người dùng trình đọc màn hình.
defaultSelected	boolean	Control có ở trạng thái active theo mặc định hay không.
disabled	boolean	Vô hiệu hóa control, không cho phép bất kỳ tương tác nào.
selected	boolean	Control có đang active hay không.
value	string	Giá trị dùng trong dữ liệu form khi control được chọn.

Slots

Slot	Mô tả
default	Nhãn giúp người dùng nhận biết lựa chọn này. Nhãn được tạo bằng cách trích xuất và nối các text node từ nội dung được cung cấp; mọi markup hay cấu trúc phần tử đều bị bỏ qua.
details	Văn bản bổ sung cung cấp ngữ cảnh hoặc hướng dẫn cho input. Văn bản này được hiển thị cùng với input và nhãn của nó để cung cấp thêm thông tin hoặc chỉ dẫn cho người dùng.
secondary-content	Nội dung bổ sung hiển thị bên dưới nhãn của lựa chọn. Có thể bao gồm nội dung phong phú như TextField, Button hoặc các component tương tác khác. Event handler trên các React component được giữ nguyên.