Textarea
การใช้งานพื้นฐาน
vue
<template>
<spr-textarea v-model="textarea" label="คำอธิบาย" placeholder="พิมพ์ที่นี่...." />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textarea = ref('');
</script>แสดงข้อความช่วยเหลือ
ข้อความช่วยเหลือคือป้ายข้อความใต้ฟิลด์อินพุตที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับคำแนะนำ เคล็ดลับการจัดรูปแบบ ข้อเสนอแนะการตรวจสอบความถูกต้อง ฯลฯ
เพื่อแสดงข้อความช่วยเหลือ ให้ตั้งค่า prop display-helper เป็น true และเพิ่ม prop helper-text พร้อมข้อความช่วยเหลือ คุณยังสามารถแทรกไอคอนด้วย prop helper-icon ได้ ซึ่งใช้ไลบรารีไอคอน Iconify
นี่คือข้อความช่วยเหลือ
นี่คือข้อความข้อผิดพลาด
vue
<template>
<spr-textarea
v-model="textarea"
label="Textarea"
placeholder="พิมพ์ที่นี่...."
display-helper
helper-text="นี่คือข้อความช่วยเหลือ"
/>
<spr-textarea
v-model="textarea"
label="Textarea"
placeholder="พิมพ์ที่นี่...."
display-helper
helper-text="นี่คือข้อความข้อผิดพลาด"
helper-icon="ph:warning-circle-fill"
error
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textarea = ref('');
</script>หรือคุณสามารถใช้ slot helperMessage เพื่อแสดงข้อความช่วยเหลือแบบกำหนดเอง
นี่คือข้อความช่วยเหลือ
นี่คือข้อความข้อผิดพลาด
vue
<template>
<spr-textarea v-model="textarea" label="Textarea" display-helper>
<template #helperMessage> นี่คือข้อความช่วยเหลือ </template>
</spr-textarea>
<spr-textarea v-model="textarea" label="Textarea" display-helper error>
<template #helperMessage>
<Icon icon="ph:warning-circle-fill" width="20px" height="20px" />
<span>นี่คือข้อความข้อผิดพลาด</span>
</template>
</spr-textarea>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textarea = ref('');
</script>สถานะข้อผิดพลาด
นี่คือข้อความข้อผิดพลาด
vue
<template>
<spr-textarea
v-model="textarea"
label="คำอธิบาย"
placeholder="พิมพ์ที่นี่...."
display-helper
helper-text="นี่คือข้อความข้อผิดพลาด"
helper-icon="ph:warning-circle-fill"
error
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textarea = ref('');
</script>ความยาวสูงสุด
24/255
vue
<template>
<spr-textarea
v-model="textareaMaxLength"
label="คำอธิบาย"
placeholder="พิมพ์ที่นี่...."
:maxLength="255"
hasCounter
/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textareaMaxLength = ref('กำหนดจำนวนตัวอักษรสูงสุด');
</script>ปิดใช้งาน
vue
<template>
<spr-textarea v-model="textarea" label="คำอธิบาย" placeholder="พิมพ์ที่นี่...." disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textarea = ref('');
</script>อ่านอย่างเดียว
vue
<template>
<spr-textarea v-model="textarea2" label="คำอธิบาย" placeholder="พิมพ์ที่นี่...." readonly />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textarea2 = ref('สวัสดีโลก ระบบการออกแบบ Sprout!!!');
</script>การอ้างอิง API
Props
| ชื่อ | คำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| id | ตัวระบุเฉพาะสำหรับองค์ประกอบ textarea ใช้สำหรับการเชื่อมโยงป้ายและวัตถุประสงค์การเข้าถึง | string | '' |
| modelValue / v-model | ค่าของ textarea ใช้กับ directive v-model สำหรับการผูกข้อมูลสองทางเพื่อจับและอัปเดตอินพุตของผู้ใช้ | string | '' |
| label | ข้อความป้ายที่แสดงเหนือ textarea เพื่ออธิบายวัตถุประสงค์หรือข้อกำหนดเนื้อหา | string | '' |
| supporting-label | ข้อความข้างป้ายที่มีสไตล์รองรับ | string | '' |
| placeholder | ข้อความตัวยึดที่แสดงภายใน textarea เมื่อว่างเปล่า ให้คำแนะนำเกี่ยวกับสิ่งที่จะป้อน | string | '' |
| active | เมื่อเป็น true จะใช้สไตล์สถานะที่ใช้งานอยู่กับ textarea สามารถใช้เพื่อไฮไลต์ textarea ในสถานะแอปพลิเคชันบางอย่าง | boolean | false |
| disabled | เมื่อเป็น true จะปิดใช้งาน textarea ป้องกันการโต้ตอบของผู้ใช้และใช้ลักษณะที่ปรากฏปิดใช้งาน | boolean | false |
| readonly | เมื่อเป็น true จะทำให้ textarea อ่านอย่างเดียว ช่วยให้ผู้ใช้ดูได้แต่ไม่สามารถแก้ไขเนื้อหาได้ | boolean | false |
| error | เมื่อเป็น true จะใช้สไตล์สถานะข้อผิดพลาดเพื่อระบุปัญหาการตรวจสอบความถูกต้อง มักใช้กับข้อความช่วยเหลือเพื่อให้ข้อเสนอแนะ | boolean | false |
| minLength | กำหนดจำนวนตัวอักษรขั้นต่ำที่ต้องการใน textarea ใช้สำหรับการตรวจสอบความถูกต้อง HTML5 | number | undefined |
| maxLength | กำหนดจำนวนตัวอักษรสูงสุดที่อนุญาตใน textarea ใช้สำหรับการตรวจสอบความถูกต้อง HTML5 และการนับตัวอักษร | number | undefined |
| rows | ระบุความสูงที่มองเห็นได้ของ textarea ในบรรทัดข้อความ ควบคุมขนาดเริ่มต้นของ textarea | number | 4 |
| displayHelper | เมื่อเป็น true จะแสดงพื้นที่ข้อความช่วยเหลือใต้ textarea ใช้เพื่อให้ข้อมูลเพิ่มเติมหรือข้อเสนอแนะการตรวจสอบความถูกต้อง | boolean | false |
| helperIcon | ระบุไอคอนที่จะแสดงควบคู่กับข้อความช่วยเหลือ ใช้ Iconify สำหรับการแสดงผลไอคอน | string | null |
| helperText | ข้อความที่จะแสดงในพื้นที่ข้อความช่วยเหลือ ให้คำแนะนำ คำสั่ง หรือข้อเสนอแนะการตรวจสอบความถูกต้อง | string | '' |
| hasCounter | เมื่อเป็น true จะแสดงตัวนับตัวอักษรที่แสดงความยาวปัจจุบันเทียบกับ maxLength มีผลเฉพาะเมื่อระบุ maxLength ด้วย | boolean | false |
Events
| ชื่อ | คำอธิบาย | พารามิเตอร์ |
|---|---|---|
| update:modelValue | ปล่อยออกมาเมื่อค่าของ textarea เปลี่ยนแปลง ใช้กับ v-model สำหรับการผูกข้อมูลสองทาง | (value: string) |
Slots
| ชื่อ | คำอธิบาย |
|---|---|
| helperMessage | อนุญาตให้มีเนื้อหาแบบกำหนดเองในพื้นที่ข้อความช่วยเหลือ ใช้ slot นี้เพื่อให้ข้อความที่มีรูปแบบ ไอคอน หรือคอมโพเนนต์อื่นๆ ในพื้นที่ข้อความช่วยเหลือ |
| counter | อนุญาตให้มีเนื้อหาแบบกำหนดเองในพื้นที่ตัวนับตัวอักษร ใช้ slot นี้เพื่อปรับแต่งลักษณะที่ปรากฏหรือพฤติกรรมของตัวนับตัวอักษร |
การใช้งานผลิตภัณฑ์
