บทที่ 8: Feedback Components
เรียนรู้การให้ Feedback ที่มีประสิทธิภาพกับผู้ใช้ด้วย MUI สำหรับมือใหม่! 💬
💡 ทำไม Feedback ถึงสำคัญ?
• 💬 User Communication: สื่อสารสถานะและผลลัพธ์ให้ผู้ใช้ทราบ
• 🎯 User Guidance: ช่วยนำทางและบอกขั้นตอนที่ต้องทำ
• ⚠️ Error Prevention: ป้องกันข้อผิดพลาดและลดความสับสน
• ✨ User Experience: เพิ่มความมั่นใจและความพึงพอใจในการใช้งาน
🎯 เมื่อเรียนจบบทนี้ คุณจะสามารถ:
- สร้าง Dialog และ Modal
confirmation dialog, form dialog, info dialog
- ใช้ Snackbar และ Toast
success, error, warning notifications
- จัดการ Alert และ Notification
system alerts, user notifications
- แสดง Progress และ Loading
linear progress, circular progress, loading states
- สร้างระบบ Feedback ครบครัน
complete user feedback system
- UX Best Practices
เลือกใช้ feedback ที่เหมาะสม
🎨 Feedback Components Overview
Dialog & Modal
หน้าต่างป๊อปอัพสำหรับการโต้ตอบที่ต้องการความสนใจ
เหมาะสำหรับ:
ยืนยันการลบ, ฟอร์มรายละเอียด, แสดงข้อมูลเพิ่มเติม
✅ ข้อดี:
• ดึงความสนใจได้ดี
• บังคับให้ตัดสินใจ
• แสดงข้อมูลละเอียด
⚠️ ข้อควรระวัง:
• ขัดจังหวะ User Flow
• ใช้งานบ่อยจะรำคาญ
Snackbar & Toast
การแจ้งเตือนชั่วคราวที่ไม่ขัดจังหวะการใช้งาน
เหมาะสำหรับ:
แจ้งสำเร็จ, แจ้งข้อผิดพลาด, การแจ้งเตือนทั่วไป
✅ ข้อดี:
• ไม่ขัดจังหวะ
• หายไปเอง
• ง่ายต่อการใช้งาน
⚠️ ข้อควรระวัง:
• อาจพลาดได้
• เวลาจำกัด
• ข้อมูลจำกัด
Alert & Notification
การแจ้งเตือนแบบถาวรสำหรับข้อมูลสำคัญ
เหมาะสำหรับ:
ข้อความเตือน, ข้อมูลสำคัญ, สถานะระบบ
✅ ข้อดี:
• เห็นชัดเจน
• ข้อมูลครบถ้วน
• คงอยู่จนกว่าจะปิด
⚠️ ข้อควรระวัง:
• กินพื้นที่
• อาจรบกวนการใช้งาน
Progress & Loading
แสดงความคืบหน้าของกระบวนการที่กำลังทำงาน
เหมาะสำหรับ:
อัพโหลดไฟล์, โหลดข้อมูล, ประมวลผลข้อมูล
✅ ข้อดี:
• ให้ข้อมูลความคืบหน้า
• ลดความกังวล
• มีประสิทธิภาพ
⚠️ ข้อควรระวัง:
• ต้องคำนวณเปอร์เซ็นต์
• ซับซ้อนในการใช้งาน
💬 Dialog & Modal
Dialog เป็นหน้าต่างป๊อปอัพที่ใช้สำหรับการโต้ตอบที่ต้องการความสนใจจากผู้ใช้
📝 Form Dialog
ใช้สำหรับรับข้อมูลจากผู้ใช้ เช่น ฟอร์มลงทะเบียน, แก้ไขข้อมูล
⚠️ Confirmation Dialog
ยืนยันการดำเนินการที่สำคัญ เช่น ลบข้อมูล, ออกจากระบบ
💻 Code Example
🎨 Basic Dialog
// Basic Dialog
<Dialog open={open} onClose={handleClose}>
<DialogTitle>หัวข้อ Dialog</DialogTitle>
<DialogContent>
<DialogContentText>
เนื้อหาของ Dialog
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>ยกเลิก</Button>
<Button onClick={handleClose} variant="contained">
ตกลง
</Button>
</DialogActions>
</Dialog>
// Confirmation Dialog
<Dialog open={confirmOpen} onClose={handleClose}>
<DialogTitle>
<ErrorOutline color="error" />
ยืนยันการลบ
</DialogTitle>
<DialogContent>
<DialogContentText>
คุณแน่ใจหรือไม่ที่จะลบข้อมูลนี้?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>ยกเลิก</Button>
<Button color="error" variant="contained">
ลบ
</Button>
</DialogActions>
</Dialog>