SOptionGroup <s-option-group>

Nhóm các tùy chọn liên quan trong select dưới một nhãn chung. SOptionGroup là Vue 3 wrapper có type cho web component <s-option-group> của Shopify Polaris.

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

Ví dụ

<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	Kiểu	Mô tả
disabled	boolean	Các option trong nhóm này có thể được chọn hay không.
label	string	Nhãn hiển thị cho người dùng của nhóm option này.

Slots

Slot	Mô tả
default	Các lựa chọn hiển thị trong danh sách dropdown. Chấp nhận component option cho từng mục có thể chọn trong nhóm này.