สถานะ

คอมโพเนนต์ Status จัดเตรียมวิธีการมาตรฐานในการแสดงตัวบ่งชี้สถานะทั่วทั้งแอปพลิเคชัน มันช่วยให้มั่นใจถึงความสม่ำเสมอของสี ไอคอน และการเข้าถึงสำหรับสถานะต่างๆ เช่น สำเร็จ ข้อมูล รอดำเนินการ เตือน และอันตราย

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

<template>
  <spr-status state="success" />
  <spr-status state="information" />
  <spr-status state="pending" />
  <spr-status state="caution" />
  <spr-status state="danger" />
</template>

ขนาด

คอมโพเนนต์ status มีขนาด 7 ขนาด คุณสามารถใช้ prop size เพื่อกำหนดขนาดของสถานะ ขนาดเริ่มต้นคือ base ขนาดที่มีให้เลือกได้คือ 2xl, xl, lg, base, sm, xs, 2xs

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
state	กำหนดสถานะของสถานะที่จะแสดง แต่ละสถานะมีสีและไอคอนเฉพาะ: success: วงกลมเช็คสีเขียวสำหรับการดำเนินการที่สำเร็จ information: ไอคอนข้อมูลสีน้ำเงินสำหรับข้อความข้อมูล pending: ไอคอนคำเตือนสีเหลืองสำหรับสถานะรอดำเนินการ caution: ไอคอนคำเตือนสีส้มสำหรับสถานะเตือน danger: วงกลมคำเตือนสีแดงสำหรับข้อผิดพลาดหรือสถานะอันตราย	'success' | 'information' | 'pending' | 'caution' | 'danger'	'success'
size	กำหนดขนาดของตัวบ่งชี้สถานะ จัดเตรียมความยืดหยุ่นสำหรับเลย์เอาต์ UI และระดับความสำคัญที่แตกต่างกัน: 2xs: 14px × 14px xs: 16px × 16px sm: 20px × 20px base: 24px × 24px lg: 32px × 32px xl: 40px × 40px 2xl: 48px × 48px	'2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl'	'base'

ไอคอน

สถานะ	ไอคอน
สำเร็จ	ph:check-circle-fill
ข้อมูล	ph:info-fill
รอดำเนินการ	ph:warning-fill
เตือน	ph:warning-fill
อันตราย	ph:warning-circle-fill