SOptionGroup <s-option-group>

在共享标签下对下拉选择中的相关选项进行分组。 SOptionGroup 是 Shopify Polaris <s-option-group> web component 的带类型 Vue 3 wrapper。

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

示例

<SOptionGroup> doesn't render on its own — it groups related <SOption> children under a label inside an <SSelect>.

United StatesCanadaFranceGermany

Value: (none)

<script setup>
import { ref } from 'vue'
import { SSelect, SOption, SOptionGroup } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SSelect label="Shipping region" placeholder="Select a region" v-model="value">
    <!-- SOptionGroup labels a cluster of SOption children -->
    <SOptionGroup label="North America">
      <SOption value="us">United States</SOption>
      <SOption value="ca">Canada</SOption>
    </SOptionGroup>
    <SOptionGroup label="Europe">
      <SOption value="fr">France</SOption>
      <SOption value="de">Germany</SOption>
    </SOptionGroup>
  </SSelect>
  <p>Value: {{ value }}</p>
</template>

Props

Prop	类型	说明
disabled	boolean	该组中的选项是否可以被选择。
label	string	面向用户的此选项组标签。

Slots

Slot	说明
default	下拉列表中显示的可选选项。接受选项组件，作为该组内的单个可选项。