Giới thiệu

Trong quá trình phát triển ứng dụng, việc trình bày một thanh tiến trình (progress bar) mượt mà là rất quan trọng để cải thiện trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn cách tạo một thanh tiến trình sử dụng component ProgressBar của PrimeVue, có khả năng chạy từ 0% đến 100% trong một khoảng thời gian tùy chỉnh.

Tìm Hiểu Component ProgressBar Của PrimeVue

Khi sử dụng PrimeVue, bạn có thể thấy rằng để thể hiện giá trị phần trăm của thanh tiến trình, bạn cần sử dụng prop :value, có giá trị từ 0 đến 100. Tuy nhiên, để thanh tiến trình có thể thay đổi giá trị một cách mượt mà qua một khoảng thời gian, bạn cần thực hiện một chút tinh chỉnh.

Thay Đổi Thời Gian Chuyển Đổi

Theo tài liệu, mỗi khi giá trị của thanh tiến trình thay đổi, có một khoảng thời gian để giá trị cũ chuyển động đến giá trị mới. Đặc biệt, thuộc tính CSS transition: width 1s ease-in-out; cho phép thanh tiến trình mất 1 giây để thay đổi từ 0% sang 100%. Để điều chỉnh thời gian này, bạn có thể sử dụng tính năng passthrough của PrimeVue để thay đổi thuộc tính CSS transition-duration.

Cách Thực Hiện

Dưới đây là đoạn mã mẫu để bạn có thể áp dụng trong dự án của mình:

vue Copy

<template>
  <ProgressBar :value="value" :pt:value:style="{ 'transition-duration': '3s' }" />
</template>

Cập nhật thuộc tính value để thấy được sự biến đổi của thanh tiến trình.

Kết Quả Cuối Cùng

Dưới đây là mã hoàn chỉnh cho component thanh tiến trình mà bạn có thể sử dụng:

vue Copy

// ~/components/app/progress-bar.vue
<template>
  <p-progress-bar
    v-bind="props"
    :pt:value:style="{ 'transition-duration': props.duration }"
  />
</template>

<script setup lang="ts">
import type { ProgressBarProps } from 'primevue';

interface AppProgressBarProps extends /* @vue-ignore */ ProgressBarProps {
  duration?: string;
}

const props = withDefaults(defineProps<AppProgressBarProps>(), {
  duration: '3s',
});
</script>

Kết Luận

Bằng cách sử dụng cách tiếp cận này, bạn có thể tạo ra một thanh tiến trình phù hợp với nhu cầu của mình một cách dễ dàng và hiệu quả. Hãy thử nghiệm với các giá trị khác nhau để xem sự khác biệt trong trải nghiệm người dùng.

Bạn có thể khám phá thêm ví dụ trực tiếp tại đây.
source: viblo

Hướng Dẫn Tạo Progress Bar Thời Gian Với Component ProgressBar Của PrimeVue