แถบความคืบหน้า

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

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

25%

vue

<template>
  <spr-progress-bar :value="progressValue" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

ขนาด

50%

75%

100%

vue

<template>
  <spr-progress-bar :value="50" size="xs" />
  <spr-progress-bar :value="75" size="sm" />
  <spr-progress-bar :value="100" size="lg" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

ป้ายกำกับ

100%

vue

<template>
  <spr-progress-bar :value="100" size="lg" :label="true" />
  <spr-progress-bar :value="100" size="lg" :label="false" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

ป้ายกำกับสนับสนุน

พร็อพพ์เพอร์ตี้ supporting-label แสดงข้อความเพิ่มเติมพร้อมกับป้ายกำกับเปอร์เซ็นต์ สิ่งนี้มีประโยชน์สำหรับการให้ข้อมูลบริบท เช่น มูลค่ารวมหรือหน่วยวัด

60%of 100 MB

75%Complete

45%Remaining

vue

<template>
  <!-- แสดงความคืบหน้ากับค่ารวม -->
  <spr-progress-bar :value="60" :max="100" :label="true" supporting-label="of 100 MB" />

  <!-- แสดงพร้อมข้อความสถานะ -->
  <spr-progress-bar :value="75" :label="true" supporting-label="Complete" />

  <!-- แสดงพร้อมข้อมูลบริบท -->
  <spr-progress-bar :value="45" :label="true" supporting-label="Remaining" />
</template>

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

const progressValue = ref(60);
</script>

ตำแหน่งการวาง

พร็อพพ์เพอร์ตี้ label-placement ควบคุมตำแหน่งที่ป้ายกำกับเปอร์เซ็นต์ปรากฏขึ้นเมื่อเทียบกับแถบความคืบหน้า เมื่อพร็อพ label ถูกตั้งค่าเป็น true คุณสามารถวางป้ายกำกับเปอร์เซ็นต์ในการจัดตำแหน่งต่างๆ

ตำแหน่งด้านบน

60%

vue

<template>
  <spr-progress-bar :value="60" label-placement="top-start" :label="true" />
  <spr-progress-bar :value="60" label-placement="top-center" :label="true" />
  <spr-progress-bar :value="60" label-placement="top-end" :label="true" />
</template>

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

const progressValue = ref(60);
</script>

ตำแหน่งด้านล่าง

60%

vue

<template>
  <spr-progress-bar :value="60" label-placement="bottom-start" :label="true" />
  <spr-progress-bar :value="60" label-placement="bottom-center" :label="true" />
  <spr-progress-bar :value="60" label-placement="bottom-end" :label="true" />
</template>

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

const progressValue = ref(60);
</script>

ตำแหน่งด้านข้าง

60%

vue

<template>
  <spr-progress-bar :value="60" label-placement="left" :label="true" />
  <spr-progress-bar :value="60" label-placement="right" :label="true" />
</template>

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

const progressValue = ref(60);
</script>

รูปแบบสี

คอมโพเนนต์แถบความคืบหน้ารองรับรูปแบบสีต่างๆ เพื่อระบุสถานะหรือบริบทที่แตกต่างกัน

75%

60%

45%

30%

90%

vue

<template>
  <!-- สำเร็จ (ค่าเริ่มต้น) -->
  <spr-progress-bar :value="75" color="success" />

  <!-- สถานะอันตราย/ข้อผิดพลาด -->
  <spr-progress-bar :value="60" color="danger" />

  <!-- สถานะคำเตือน -->
  <spr-progress-bar :value="45" color="warning" />

  <!-- สถานะข้อมูล -->
  <spr-progress-bar :value="30" color="info" />

  <!-- สถานะเป็นกลาง -->
  <spr-progress-bar :value="90" color="neutral" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

ค่าแม็กซ์ที่กำหนดเอง

คุณสามารถปรับแต่งค่าสูงสุดเพื่อแสดงสเกลหรือบริบทที่แตกต่างกัน

50%

25%

40%

vue

<template>
  <!-- 5 จาก 10 = 50% -->
  <spr-progress-bar :value="5" :max="10" :label="true" />

  <!-- 3 จาก 12 = 25% -->
  <spr-progress-bar :value="3" :max="12" :label="true" />

  <!-- 8 จาก 20 = 40% -->
  <spr-progress-bar :value="8" :max="20" :label="true" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

ตำแหน่งเปอร์เซ็นต์

ควบคุมตำแหน่งที่ป้ายกำกับเปอร์เซ็นต์ปรากฏขึ้นเมื่อเทียบกับแถบความคืบหน้า คุณสามารถวางตำแหน่งไว้ด้านบน ด้านล่าง ด้านซ้าย หรือด้านขวา

60%

vue

<template>
  <!-- เปอร์เซ็นต์อยู่เหนือแถบความคืบหน้า -->
  <spr-progress-bar :value="60" labelPlacement="top" :label="true" />

  <!-- เปอร์เซ็นต์อยู่ใต้แถบความคืบหน้า (ค่าเริ่มต้น) -->
  <spr-progress-bar :value="60" labelPlacement="bottom" :label="true" />

  <!-- เปอร์เซ็นต์อยู่ด้านซ้ายของแถบความคืบหน้า -->
  <spr-progress-bar :value="60" labelPlacement="left" :label="true" />

  <!-- เปอร์เซ็นต์อยู่ด้านขวาของแถบความคืบหน้า -->
  <spr-progress-bar :value="60" labelPlacement="right" :label="true" />
</template>

<script setup>
import { ref } from 'vue';
const progressValue = ref(25);
</script>

ตัวอย่างขั้นสูง

ความคืบหน้าอัปโหลดไฟล์

65%

vue

<template>
  <div>
    <spr-progress-bar :value="uploadProgress" color="success" size="sm" :label="true" />
  </div>
</template>

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

const uploadProgress = ref(65);

// จำลองความคืบหน้าอัปโหลด
const simulateUpload = () => {
  const interval = setInterval(() => {
    uploadProgress.value += Math.random() * 10;
    if (uploadProgress.value >= 100) {
      uploadProgress.value = 100;
      clearInterval(interval);
    }
  }, 500);
};

// เริ่มการจำลอง
simulateUpload();
</script>

สถานะข้อผิดพลาดของความคืบหน้า

60%

vue

<template>
  <div>
    <spr-progress-bar :value="errorProgress" color="danger" size="lg" :label="true" />
    <p class="spr-text-color-danger-base spr-text-sm">การอัปโหลดล้มเหลวที่ 60%</p>
  </div>
</template>

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

const errorProgress = ref(60);
</script>

กระบวนการหลายขั้นตอน

60%

ขั้นตอนที่ 3 จาก 5 เสร็จสิ้นแล้ว

vue

<template>
  <div>
    <spr-progress-bar :value="stepProgress" color="info" size="sm" :label="true" />
    <p class="spr-text-color-base spr-text-sm">ขั้นตอน {{ currentStep }} จาก {{ totalSteps }} เสร็จสิ้นแล้ว</p>
  </div>
</template>

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

const currentStep = ref(3);
const totalSteps = ref(5);
const stepProgress = ref(60); // 3/5 = 60%
</script>

การอ้างอิง API

พร็อพส์

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
`value`	ค่าความคืบหน้าปัจจุบัน ค่านี้กำหนดว่ามีส่วนไหนของแถบความคืบหน้าถูกเติม คำนวณเป็นเปอร์เซ็นต์ของค่า `max`	number	`0`
`size`	กำหนดความสูงของแถบความคืบหน้า ตัวเลือกประกอบด้วย: `xs`: เล็กพิเศษ (ความสูง 4px) `sm`: เล็ก (ความสูง 8px) `lg`: ใหญ่ (ความสูง 12px)	'xs' \| 'sm' \| 'lg'	`'lg'`
`max`	ค่าสูงสุดสำหรับแถบความคืบหน้า พร็อพเพอร์ตี้ `value` จะถูกคำนวณเป็นเปอร์เซ็นต์ของตัวเลขนี้ ต้องอยู่ระหว่าง 1 ถึง 100	number	`100`
`label`	เมื่อตั้งค่าเป็น `true` จะแสดงป้ายกำกับเปอร์เซ็นต์ใต้แถบความคืบหน้า ป้ายกำกับแสดงเปอร์เซ็นต์ที่คำนวณได้ตาม `value` และ `max`	boolean	`true`
`color`	กำหนดธีมสีของแถบความคืบหน้า ตัวเลือกประกอบด้วย: `success`: สีเขียวสำหรับการดำเนินการที่สำเร็จ (ค่าเริ่มต้น) `danger`: สีแดงสำหรับข้อผิดพลาดหรือการดำเนินการที่ล้มเหลว `warning`: สีส้มสำหรับคำเตือนหรือการดำเนินการที่รอดำเนินการ `info`: สีน้ำเงินสำหรับสถานะข้อมูล `neutral`: สีเทาสำหรับสถานะเป็นกลาง	'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral'	`'success'`
`label-placement`	กำหนดตำแหน่งและการจัดตำแหน่งของป้ายกำกับเปอร์เซ็นต์เมื่อเทียบกับแถบความคืบหน้า ตัวเลือกประกอบด้วย: `top`: วางป้ายกำกับเปอร์เซ็นต์เหนือแถบความคืบหน้า จัดตำแหน่งซ้าย (เหมือนกับ `top-start`) `top-start`: วางป้ายกำกับเปอร์เซ็นต์เหนือแถบความคืบหน้า จัดตำแหน่งซ้าย `top-center`: วางป้ายกำกับเปอร์เซ็นต์เหนือแถบความคืบหน้า จัดตำแหน่งกลาง `top-end`: วางป้ายกำกับเปอร์เซ็นต์เหนือแถบความคืบหน้า จัดตำแหน่งขวา `bottom`: วางป้ายกำกับเปอร์เซ็นต์ใต้แถบความคืบหน้า จัดตำแหน่งซ้าย (เหมือนกับ `bottom-start`, ค่าเริ่มต้น) `bottom-start`: วางป้ายกำกับเปอร์เซ็นต์ใต้แถบความคืบหน้า จัดตำแหน่งซ้าย `bottom-center`: วางป้ายกำกับเปอร์เซ็นต์ใต้แถบความคืบหน้า จัดตำแหน่งกลาง `bottom-end`: วางป้ายกำกับเปอร์เซ็นต์ใต้แถบความคืบหน้า จัดตำแหน่งขวา `left`: วางป้ายกำกับเปอร์เซ็นต์ด้านซ้ายของแถบความคืบหน้า `right`: วางป้ายกำกับเปอร์เซ็นต์ด้านขวาของแถบความคืบหน้า	'top' \| 'top-start' \| 'top-center' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end' \| 'left' \| 'right'	`'bottom'`
`supporting-label`	แสดงข้อความเพิ่มเติมพร้อมกับป้ายกำกับเปอร์เซ็นต์ สิ่งนี้มีประโยชน์สำหรับการให้ข้อมูลบริบท เช่น มูลค่ารวม หน่วยวัด หรือข้อมูลสถานะ ป้ายกำกับสนับสนุนปรากฏถัดจากป้ายกำกับหลัก	string	`''`

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

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

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

เรดิโอ

เลือก

แถบความคืบหน้า

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

ขนาด

ป้ายกำกับ

ป้ายกำกับสนับสนุน

ตำแหน่งการวาง

ตำแหน่งด้านบน

ตำแหน่งด้านล่าง

ตำแหน่งด้านข้าง

รูปแบบสี

ค่าแม็กซ์ที่กำหนดเอง

ตำแหน่งเปอร์เซ็นต์

ตัวอย่างขั้นสูง

ความคืบหน้าอัปโหลดไฟล์

สถานะข้อผิดพลาดของความคืบหน้า

กระบวนการหลายขั้นตอน

การอ้างอิง API

พร็อพส์

แถบความคืบหน้า ​

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

ขนาด ​

ป้ายกำกับ ​

ป้ายกำกับสนับสนุน ​

ตำแหน่งการวาง ​

ตำแหน่งด้านบน ​

ตำแหน่งด้านล่าง ​

ตำแหน่งด้านข้าง ​

รูปแบบสี ​

ค่าแม็กซ์ที่กำหนดเอง ​

ตำแหน่งเปอร์เซ็นต์ ​

ตัวอย่างขั้นสูง ​

ความคืบหน้าอัปโหลดไฟล์ ​

สถานะข้อผิดพลาดของความคืบหน้า ​

กระบวนการหลายขั้นตอน ​

การอ้างอิง API ​

พร็อพส์ ​

แถบความคืบหน้า

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

ขนาด

ป้ายกำกับ

ป้ายกำกับสนับสนุน

ตำแหน่งการวาง

ตำแหน่งด้านบน

ตำแหน่งด้านล่าง

ตำแหน่งด้านข้าง

รูปแบบสี

ค่าแม็กซ์ที่กำหนดเอง

ตำแหน่งเปอร์เซ็นต์

ตัวอย่างขั้นสูง

ความคืบหน้าอัปโหลดไฟล์

สถานะข้อผิดพลาดของความคืบหน้า

กระบวนการหลายขั้นตอน

การอ้างอิง API

พร็อพส์