SOptionGroup <s-option-group>

किसी select के भीतर संबंधित विकल्पों को एक साझा label के तहत समूहित करता है। SOptionGroup Shopify के Polaris <s-option-group> web component का typed 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	Type	विवरण
disabled	boolean	क्या इस group के options चुने जा सकते हैं या नहीं।
label	string	options के इस group के लिए उपयोगकर्ताओं को दिखने वाला label।

Slots

Slot	विवरण
default	dropdown list में दिखाए जाने वाले चुनने योग्य options। इस group के अंदर अलग-अलग चुनने योग्य items के लिए option components स्वीकार करता है।