Radio Grouped

คอมโพเนนต์ Radio Grouped แสดงกลุ่มปุ่มวิทยุจากอาร์เรย์ของตัวเลือก ซึ่งทำให้การสร้างกลุ่มปุ่มวิทยุง่ายขึ้น โดยมีการสนับสนุนสำหรับการผูกข้อมูลด้วย v-model สถานะที่ปิดการใช้งาน และตัวช่วยแสดงข้อมูล

การใช้งานพื้นฐาน

Option 1

Option 2

Option 3

<template>
  <spr-radio-grouped
    id="grouped-radio"
    v-model="selectedOption"
    name="grouped_options"
    :options="[
      { text: 'Option 1', value: 'value1' },
      { text: 'Option 2', value: 'value2' },
      { text: 'Option 3', value: 'value3' },
    ]"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const selectedOption = ref('');
</script>

ค่าที่เลือกไว้ล่วงหน้า

Option 1

Option 2

Option 3

<template>
  <spr-radio-grouped
    id="grouped-radio"
    v-model="selectedOption"
    name="grouped_options"
    :options="[
      { text: 'Option 1', value: 'value1' },
      { text: 'Option 2', value: 'value2' },
      { text: 'Option 3', value: 'value3' },
    ]"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const selectedOption = ref('value2');
</script>

สถานะที่ปิดการใช้งาน

เพิ่มแอตทริบิวต์ disabled เพื่อปิดการใช้งานตัวเลือกทั้งหมด หรือตั้งค่า disabled: true ในตัวเลือกแต่ละรายการ

ปิดการใช้งานทั้งหมด

Option 1

Option 2

ปิดการใช้งานบางส่วน

Option 1

Option 2

Option 3

<template>
  <div class="spr-flex spr-flex-col spr-gap-4">
    <!-- All disabled -->
    <spr-radio-grouped
      id="grouped-radio"
      v-model="selectedOption"
      name="grouped_options"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
      ]"
      disabled
    />

    <!-- Partial disabled -->
    <spr-radio-grouped
      id="grouped-radio-partial"
      v-model="selectedOption"
      name="grouped_options_partial"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2', disabled: true },
        { text: 'Option 3', value: 'value3' },
      ]"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const selectedOption = ref('');
</script>

ตัวช่วยแสดงข้อมูล

แสดงข้อความช่วยเหลือหรือข้อความข้อผิดพลาดด้านล่างกลุ่มตัวเลือกวิทยุโดยใช้ props display-helper, helper-text, และ error

ข้อความตัวช่วย

Option 1

Option 2

เลือกหนึ่งในตัวเลือกที่มีอยู่

สถานะข้อผิดพลาด

Option 1

Option 2

จำเป็นต้องกรอกข้อมูลในช่องนี้

<template>
  <div class="spr-flex spr-flex-col spr-gap-6">
    <!-- ข้อความตัวช่วย -->
    <spr-radio-grouped
      id="grouped-radio"
      v-model="selectedOption"
      name="grouped_options"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
      ]"
      display-helper
      helper-text="เลือกหนึ่งในตัวเลือกที่มีอยู่"
    />

    <!-- สถานะข้อผิดพลาด -->
    <spr-radio-grouped
      id="grouped-radio-error"
      v-model="selectedOption"
      name="grouped_options_error"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
      ]"
      display-helper
      helper-icon="ph:info-fill"
      helper-text="จำเป็นต้องกรอกข้อมูลในช่องนี้"
      error
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const selectedOption = ref('');
</script>

การจัดแนวแนวนอน

ควบคุมการจัดแนวแนวนอนของกลุ่มวิทยุโดยใช้ prop horizontal-align ที่มีค่า: left, center, หรือ right

จัดแนวซ้าย

Option 1

Option 2

Option 3

จัดแนวกึ่งกลาง

Option 1

Option 2

Option 3

จัดแนวขวา

Option 1

Option 2

Option 3

<template>
  <div class="spr-flex spr-flex-col spr-gap-6">
    <spr-radio-grouped
      id="grouped-radio"
      v-model="selectedOption"
      name="grouped_options"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
        { text: 'Option 3', value: 'value3' },
      ]"
      horizontal-align="left"
    />

    <spr-radio-grouped
      id="grouped-radio-center"
      v-model="selectedOption"
      name="grouped_options_center"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
        { text: 'Option 3', value: 'value3' },
      ]"
      horizontal-align="center"
    />

    <spr-radio-grouped
      id="grouped-radio-right"
      v-model="selectedOption"
      name="grouped_options_right"
      :options="[
        { text: 'Option 1', value: 'value1' },
        { text: 'Option 2', value: 'value2' },
        { text: 'Option 3', value: 'value3' },
      ]"
      horizontal-align="right"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const selectedOption = ref('');
</script>

คำอธิบาย

เพิ่มคำอธิบายที่เป็นประโยชน์ให้กับตัวเลือกวิทยุแต่ละรายการโดยใช้คุณสมบัติ description ในอาร์เรย์ตัวเลือก วิธีนี้ให้บริบทหรือรายละเอียดเพิ่มเติมเกี่ยวกับแต่ละตัวเลือก

ตัวเลือก 1นี่คือตัวเลือกแรกพร้อมคำอธิบายที่เป็นประโยชน์

ตัวเลือก 2นี่คือตัวเลือกที่สองพร้อมรายละเอียดเพิ่มเติม

ตัวเลือก 3นี่คือตัวเลือกที่สามพร้อมข้อมูลเพิ่มเติม

<template>
  <spr-radio-grouped
    id="grouped-radio"
    v-model="selectedOption"
    name="grouped_options"
    :options="[
      { text: 'Option 1', value: 'value1', description: 'This is the first option with a helpful description' },
      { text: 'Option 2', value: 'value2', description: 'This is the second option with more details' },
      { text: 'Option 3', value: 'value3', description: 'This is the third option with additional information' },
    ]"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const selectedOption = ref('value1');
</script>

กล่องเลือก

ใช้พร็อพส์ choice-box เพื่อแสดงตัวเลือกเรดิโอเป็นกล่องเลือกแบบเต็มความกว้างที่มีพื้นที่คลิกขยายขึ้น วิธีนี้ช่วยปรับปรุงการใช้งานโดยทำให้คอมโพเนนต์ทั้งหมดเป็นแบบโต้ตอบได้

Option 1

Option 2

Option 3

<template>
  <spr-radio-grouped
    id="grouped-radio"
    v-model="selectedOption"
    name="grouped_options"
    :options="[
      { text: 'Option 1', value: 'value1' },
      { text: 'Option 2', value: 'value2' },
      { text: 'Option 3', value: 'value3' },
    ]"
    choice-box
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const selectedOption = ref('value1');
</script>

ข้อมูลอ้างอิง API

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
id	ตัวระบุเฉพาะสำหรับกลุ่มวิทยุ ใช้เป็นฐานสำหรับรหัสปุ่มวิทยุแต่ละปุ่ม (เช่น id-0, id-1) จำเป็นต้องมีเพื่อการเข้าถึง	string	Required
model-value	ค่าที่เลือกไว้ในปัจจุบันที่ใช้กับ v-model สำหรับการผูกข้อมูลแบบสองทาง เมื่อค่านี้ตรงกับ value ของตัวเลือก ตัวเลือกนั้นจะถูกเลือก	string | number | boolean	undefined
name	แอตทริบิวต์ชื่อสำหรับองค์ประกอบการป้อนข้อมูลวิทยุทั้งหมดในกลุ่ม วิทยุทั้งหมดในกลุ่มจะใช้ชื่อนี้เพื่อให้แน่ใจว่าจะเลือกได้เพียงแต่ชื่อเดียวเท่านั้น	string	Required
options	อาร์เรย์ของตัวเลือกวิทยุ ตัวเลือกแต่ละรายการควรมีคุณสมบัติ text (ป้ายกำกับการแสดงผล) และ value (ค่าตัวเลือก) ตัวเลือกอาจมีคุณสมบัติ disabled ได้	RadioOption[]	[]
disabled	เมื่อตั้งค่าเป็น true ปุ่มวิทยุทั้งหมดในกลุ่มจะกลายเป็นแบบไม่โต้ตอบและปรากฏเป็นสีเทา ตัวเลือกแต่ละรายการสามารถยังคงปิดการใช้งานโดยใช้คุณสมบัติ disabled ในวัตถุตัวเลือก	boolean	false
horizontal-align	ควบคุมการจัดแนวแนวนอนของตัวเลือกวิทยุ ยอมรับค่า: `left`, `center`, หรือ `right`	'left' | 'center' | 'right'	'left'
display-helper	เมื่อตั้งค่าเป็น true จะแสดงข้อความตัวช่วยด้านล่างตัวเลือกกลุ่มวิทยุ	boolean	false
helper-text	ข้อความตัวช่วยที่จะแสดงด้านล่างกลุ่มวิทยุเมื่อ display-helper เป็น true ให้บริบทเพิ่มเติมหรือคำแนะนำแก่ผู้ใช้	string	''
helper-icon	ชื่อไอคอนที่จะแสดงข้างๆ ข้อความตัวช่วย ยอมรับชื่อไอคอนใดๆ จากไลบรารีไอคอน	string	null
error	เมื่อตั้งค่าเป็น true จะแสดงกลุ่มวิทยุในสถานะข้อผิดพลาดพร้อมข้อความตัวช่วยสีแดง	boolean	false
choice-box	เมื่อตั้งค่าเป็น true จะแปลงตัวเลือกเรดิโอแต่ละตัวเป็นกล่องเลือกแบบเต็มความกว้างที่มีพื้นที่คลิกขยายขึ้น ซึ่งช่วยปรับปรุงการใช้งานและประสบการณ์ผู้ใช้	boolean	false

Events

ชื่อ	คำอธิบาย	พารามิเตอร์
update:modelValue	ปล่อยออกมาเมื่อเลือกตัวเลือกวิทยุ เหตุการณ์นี้ใช้เพื่อให้การผูกข้อมูล v-model ทำงานได้อย่างถูกต้อง	(value: string | number | boolean) - ค่าของตัวเลือกที่เลือก

RadioOption Interface

props options ต้องการอาร์เรย์ของอ็อบเจ็กต์ที่มีโครงสร้างต่อไปนี้:

interface RadioOption {
  text: string; // ข้อความแสดงตัวเลือก
  value: string | number | boolean; // ค่าของตัวเลือก
  disabled?: boolean; // ตัวเลือก: ปิดการใช้งานตัวเลือกแต่ละรายการ
}

การใช้งานผลิตภัณฑ์