SChoice <s-choice>

选项列表中的一个选项。 SChoice 是 Shopify Polaris <s-choice> web component 的带类型 Vue 3 wrapper。

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

示例

<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	类型	说明
accessibilityLabel	string	供屏幕阅读器等辅助技术用户使用的标签。设置后，提供的任何子元素或 label 都不会被朗读。也可以借此显示一个没有可见标签的控件，同时仍为屏幕阅读器用户提供上下文。
defaultSelected	boolean	控件默认是否处于激活状态。
disabled	boolean	禁用控件，不允许任何交互。
selected	boolean	控件是否处于激活状态。
value	string	控件被选中时在表单数据中使用的值。

Slots

Slot	说明
default	向用户标识此可选选项的标签。标签通过提取并拼接所提供内容中的文本节点生成；任何标记或元素结构都会被忽略。
details	为输入框提供上下文或指引的附加文本。该文本会与输入框及其标签一起显示，为用户提供更多信息或说明。
secondary-content	显示在选项标签下方的附加内容。可以包含丰富的内容，例如 TextField、Button 或其他交互组件。React 组件上的事件处理函数会被保留。