SOption <s-option>

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

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

Ví dụ

<SOption> doesn't render on its own — it's an option within an <SSelect> (optionally grouped by <SOptionGroup>). Its value prop is what gets bound into the parent's v-model, and its default slot is the visible option label.

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 label="North America">
      <!-- Each SOption's `value` is what SSelect's v-model receives -->
      <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ả
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	Văn bản hoặc các phần tử hiển thị làm nhãn của option, giúp người dùng nhận biết lựa chọn trong dropdown hoặc danh sách lựa chọn.