เรดิโอ

ปุ่มเรดิโอเป็นคอมโพเนนต์ที่ช่วยให้ผู้ใช้เลือกตัวเลือกเดียวจากชุดของทางเลือก

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

ป้ายกำกับเรดิโอ 1

ป้ายกำกับเรดิโอ 2

vue

<template>
  <div class="spr-flex spr-flex-col spr-items-start spr-gap-2">
    <spr-radio id="radio1" v-model="radioModel" name="radio_name" value="value1">ป้ายกำกับเรดิโอ 1</spr-radio>
    <spr-radio id="radio2" v-model="radioModel" name="radio_name" value="value2">ป้ายกำกับเรดิโอ 2</spr-radio>
  </div>
</template>

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

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

ทำงานอยู่

ป้ายกำกับเรดิโอ 1

ป้ายกำกับเรดิโอ 2

vue

<template>
  <spr-radio id="radio1" v-model="radioModel" name="radio_name" value="value1">ป้ายกำกับเรดิโอ 1</spr-radio>
  <spr-radio id="radio2" v-model="radioModel" name="radio_name" value="value2">ป้ายกำกับเรดิโอ 2</spr-radio>
</template>

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

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

ปิดใช้งาน

เพิ่มแอตทริบิวต์ disabled ให้กับคอมโพเนนต์ <spr-radio> เพื่อปิดใช้งานปุ่มเรดิโอ

ป้ายกำกับเรดิโอ 1

ป้ายกำกับเรดิโอ 2

vue

<template>
  <div class="spr-flex spr-flex-col spr-items-start spr-gap-2">
    <spr-radio id="disabledradio1" v-model="radioModel" name="radio_name" value="value1">ป้ายกำกับเรดิโอ 1</spr-radio>
    <spr-radio id="disabledradio2" v-model="radioModel" name="radio_name" value="value2" disabled>
      ป้ายกำกับเรดิโอ 2
    </spr-radio>
  </div>
</template>

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

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

กล่องเลือก

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

ตัวเลือก 1

เลือกตัวเลือกนี้สำหรับฟีเจอร์ A

ตัวเลือก 2

เลือกตัวเลือกนี้สำหรับฟีเจอร์ B

ตัวเลือก 3

เลือกตัวเลือกนี้สำหรับฟีเจอร์ C

vue

<template>
  <div class="spr-flex spr-flex-col spr-items-start spr-gap-2">
    <spr-radio id="choicebox1" v-model="selectedOption" name="radio_choicebox" value="option1" choice-box full-width>
      <div class="spr-body-sm-regular spr-text-color-strong">ตัวเลือก 1</div>
      <div class="spr-body-sm-regular spr-text-color-base">เลือกตัวเลือกนี้สำหรับฟีเจอร์ A</div>
    </spr-radio>
    <spr-radio id="choicebox2" v-model="selectedOption" name="radio_choicebox" value="option2" choice-box full-width>
      <div class="spr-body-sm-regular spr-text-color-strong">ตัวเลือก 2</div>
      <div class="spr-body-sm-regular spr-text-color-base">เลือกตัวเลือกนี้สำหรับฟีเจอร์ B</div>
    </spr-radio>
    <spr-radio id="choicebox3" v-model="selectedOption" name="radio_choicebox" value="option3" choice-box full-width>
      <div class="spr-body-sm-regular spr-text-color-strong">ตัวเลือก 3</div>
      <div class="spr-body-sm-regular spr-text-color-base">เลือกตัวเลือกนี้สำหรับฟีเจอร์ C</div>
    </spr-radio>
  </div>
</template>

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

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

การอ้างอิง API

พร็อพส์

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
`id`	ตัวระบุที่ไม่ซ้ำสำหรับองค์ประกอบอินพุตเรดิโอ จำเป็นสำหรับการเข้าถึงและการเชื่อมโยงป้ายกำกับ	string	`จำเป็น`
`modelValue`	ค่าที่เลือกปัจจุบันใช้กับ v-model สำหรับการผูกสองทาง เมื่อตรงกับพร็อพเพอร์ตี้ `value` ของเรดิโอ จะเลือกเรดิโอ	string \| number \| boolean	`undefined`
`name`	แอตทริบิวต์ชื่อสำหรับองค์ประกอบอินพุตเรดิโอ ปุ่มเรดิโอในกลุ่มเดียวกันควรใช้ชื่อเดียวกันเพื่อให้แน่ใจว่าเลือกได้เพียงอันเดียวในแต่ละครั้ง	string	`จำเป็น`
`value`	ค่าที่เกี่ยวข้องกับปุ่มเรดิโอนี้ เมื่อเลือกเรดิโอ จะกำหนดค่านี้ให้กับ `modelValue`	string \| number \| boolean	`จำเป็น`
`disabled`	เมื่อตั้งค่าเป็น `true` ปุ่มเรดิโอจะไม่สามารถโต้ตอบได้และปรากฏเป็นการปิดใช้งาน ผู้ใช้ไม่สามารถเลือกปุ่มเรดิโอที่ปิดใช้งานได้	boolean	`false`
`description`	ข้อความอธิบายเพิ่มเติมที่แสดงใต้ป้ายกำกับเรดิโอเพื่อให้บริบทหรือรายละเอียดเพิ่มเติมเกี่ยวกับตัวเลือกนี้	string	`undefined`
`bordered`	เมื่อตั้งค่าเป็น `true` จะเพิ่มเส้นขอบรอบคอมโพเนนต์เรดิโอทั้งหมด (รวมถึงป้ายกำกับ) ให้การแยกภาพจากองค์ประกอบรอบข้าง	boolean	`false`
`fullWidth`	เมื่อตั้งค่าเป็น `true` คอมโพเนนต์เรดิโอจะยืดเพื่อเติมเต็มความกว้างเต็มของคอนเทนเนอร์ เมื่อ `false` จะกว้างเพียงเท่ากับเนื้อหา	boolean	`false`
`choiceBox`	เมื่อตั้งค่าเป็น `true` จะแปลงปุ่มเรดิโอให้เป็นสไตล์กล่องเลือกที่มีพื้นที่คลิกขยายขึ้น ซึ่งครอบคลุมคอมโพเนนต์ทั้งหมด ทำให้ง่ายต่อการเลือกโดยคลิกในที่ใดก็ได้บนกล่อง	boolean	`false`

อีเวนต์

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

สล็อต

ชื่อ	คำอธิบาย
`default`	เนื้อหาที่จะแสดงเป็นป้ายกำกับของปุ่มเรดิโอ โดยทั่วไปจะมีข้อความแต่สามารถรวมองค์ประกอบอื่นสำหรับป้ายกำกับที่ซับซ้อนมากขึ้น

แอนิเมชัน

แอนิเมชัน	คำอธิบาย
`animate-shadow-grow`	ใช้เมื่อเลือกปุ่มเรดิโอ สร้างการเปลี่ยนผ่านที่ราบรื่นจากวงกลมว่างไปเป็นวงกลมที่เต็มพร้อมศูนย์กลางสีขาว

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

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

เครื่องมือเลือกวันที่

ช่องป้อนข้อมูล