สถานะว่างเปล่า

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

Image Slot Here

No results found

Try a different search term

<template>
  <spr-empty-state description="No results found" subDescription="Try a different search term">
    <div>Image Here</div>

    <template #button>
      <spr-button tone="success">Retry</spr-button>
    </template>
  </spr-empty-state>
</template>

รูปภาพ

คุณยังสามารถใช้พร็อพส์ image เพื่อแสดงรูปภาพในสถานะว่างเปล่าที่กำหนด พร็อพส์ image ยอมรับค่าตัวอักษรที่ตรงกับชื่อของรูปภาพ

รายการรูปภาพที่สามารถใช้ได้ในคอมโพเนนต์สถานะว่างเปล่า

• bug
• clock
• dashboard
• employees
• government-id

• integration
• list
• social-media-handles
• work-in-progress
• work-location

Current image is bug

Try a different image

<template>
  <spr-empty-state
    :description="`Current image is ${currentImage}`"
    subDescription="Try a different image"
    :image="currentImage"
  >
    <template #button>
      <div class="spr-flex spr-flex-col spr-gap-4">
        <spr-button tone="success">Retry</spr-button>
        <spr-button variant="secondary" @click="changeImage">Change Image</spr-button>
      </div>
    </template>
  </spr-empty-state>
</template>

<script setup>
import { ref } from 'vue';

const imageTypes = [
  'bug',
  'clock',
  'dashboard',
  'employees',
  'government-id',
  'integration',
  'list',
  'social-media-handles',
  'work-in-progress',
  'work-location',
];

const currentImage = ref('bug');

const changeImage = () => {
  // Get the current index of the image
  const currentIndex = imageTypes.indexOf(currentImage.value);
  // Move to the next image in the array, or back to the first if at the end
  const nextIndex = (currentIndex + 1) % imageTypes.length;
  currentImage.value = imageTypes[nextIndex];
};
</script>

ขนาดรูปภาพ

ขนาดรูปภาพสามารถควบคุมได้โดยส่งพร็อพส์ size ขนาดเริ่มต้นคือ small (small และ large)

No results found

Try a different search term

No results found

Try a different search term

<template>
  <spr-empty-state description="No results found" subDescription="Try a different search term" image="bug" size="small">
    <template #button>
      <spr-button tone="success">Retry</spr-button>
    </template>
  </spr-empty-state>

  <spr-empty-state
    description="No results found"
    subDescription="Try a different search term"
    image="work-location"
    size="large"
  >
    <template #button>
      <spr-button tone="success">Retry</spr-button>
    </template>
  </spr-empty-state>
</template>

เร็ว ๆ นี้

แสดงข้อความที่จะมาเร็ว ๆ นี้โดยใช้เพียงพร็อพส์คำอธิบายโดยไม่มีรูปภาพหรือปุ่มเพิ่มเติม:

Coming Soon

Try a different search term.

<template>
  <spr-empty-state description="Coming Soon" />
</template>

API Reference

Props

ชื่อ	คำอธิบาย	ประเภท	ค่าที่มี	ค่าเริ่มต้น
description	ข้อความคำอธิบายหลักสำหรับสถานะว่างเปล่า ข้อความนี้แสดงอย่างเด่นชัดเพื่อแจ้งผู้ใช้เกี่ยวกับการขาดเนื้อหาหรือผลการค้นหา	String	สตริงข้อความใดๆ	'No results found'
subDescription	ข้อความเพิ่มเติมที่ให้บริบทหรือคำแนะนำเพิ่มเติมสำหรับสถานะว่างเปล่า ข้อความรองนี้ปรากฏใต้คำอธิบายหลักด้วยสีที่อ่อนกว่าเพื่อให้คำอธิบายหรือคำแนะนำเพิ่มเติม	String	สตริงข้อความใดๆ	'Try a different search term.'
size	ควบคุมขนาดโดยรวมของคอมโพเนนต์สถานะว่างเปล่า ซึ่งส่งผลต่อทั้งมิติของคอนเทนเนอร์และขนาดรูปภาพ: small: การแสดงที่กระชับมากขึ้น (min-height: 240px, image: 120x120px) large: การแสดงที่เด่นชัดมากขึ้น (min-height: 360px, image: 200x200px)	String	'small', 'large'	'small'
image	ระบุรูปภาพที่กำหนดไว้ล่วงหน้าเพื่อแสดงในสถานะว่างเปล่า คอมโพเนนต์โหลดรูปภาพ SVG จากไดเรกทอรี assets โดยอัตโนมัติตามค่าพร็อพส์นี้ สิ่งนี้ใช้เมื่อไม่มีรูปภาพปรับแต่งที่ให้ผ่านสล็อตเริ่มต้น	String	'bug', 'clock', 'dashboard', 'employees', 'government-id', 'integration', 'list', 'social-media-handles', 'work-in-progress', 'work-location'	'list'
hasButton	ระบุว่าสถานะว่างเปล่ามีปุ่มหรือไม่ เมื่อตั้งเป็น true คอมโพเนนต์คาดหวังเนื้อหาที่จะให้ในสล็อตปุ่ม พร็อพส์นี้ใช้สำหรับการจัดการสถานะภายในเป็นหลัก	Boolean	true, false	false
emptyStateCustomClasses	คลาส CSS เพิ่มเติมที่จะใช้กับคอนเทนเนอร์สถานะว่างเปล่า สิ่งนี้ช่วยให้การจัดสไตล์ปรับแต่งโดยไม่ต้องแก้ไขการจัดสไตล์ภายในของคอมโพเนนต์	String	สตริงคลาส CSS ที่ถูกต้องใดๆ	''

Events

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

Slots

ชื่อ	คำอธิบาย
default	สล็อตเริ่มต้นสามารถใช้เพื่อแทนรูปภาพที่กำหนดไว้ล่วงหน้าด้วยเนื้อหาปรับแต่ง หากให้ สล็อตเนื้อหานี้จะแสดงแทนรูปภาพที่ระบุโดยพร็อพส์ image เนื้อหาจะได้รับคลาสขนาดเดียวกันกับที่รูปภาพที่กำหนดไว้ล่วงหน้าจะมี ตามพร็อพส์ size
button	ใช้เพื่อให้ปุ่มการดำเนินการหรือองค์ประกอบแบบโต้ตอบอื่นๆ ที่จะแสดงใต้ข้อความคำอธิบาย โดยปกติประกอบด้วยปุ่มที่อนุญาตให้ผู้ใช้ลองดำเนินการอีกครั้งหรือนำทางไปที่อื่น