Progress линейный

Naive UI предоставляет гибкий компонент NProgress для визуализации прогресса выполнения операций. Линейный индикатор используется для отображения процентного выполнения задач, загрузки данных или любой другой прогресс-метрики.

Основная структура компонента

import { createApp, ref } from 'vue';
import { NProgress } from 'naive-ui';

const app = createApp({
  setup() {
    const progress = ref(0);
    return { progress };
  },
  template: `
    <n-progress v-model:percentage="progress" show-value />
    <button @click="progress += 10">Увеличить</button>
  `
});
app.mount('#app');

Ключевые моменты:

  • v-model:percentage связывает текущий процент прогресса с реактивной переменной.
  • show-value отображает численное значение прогресса прямо на индикаторе.
  • Прогресс может изменяться динамически через изменение переменной.

Свойства компонента

  • percentage — число от 0 до 100, определяет текущий прогресс.
  • show-value — булевое значение, показывает или скрывает текст с процентом.
  • status — определяет визуальное состояние: 'default' | 'success' | 'error' | 'warning'.
  • stroke-height — высота линии прогресса в пикселях.
  • color — кастомный цвет прогресс-бара. Может быть строкой цвета или функцией, возвращающей цвет в зависимости от процента.
  • processing — булевое значение, активирует анимацию “бегущей линии”.

Примеры настройки цвета

<NProgress
  v-model:percentage="progress"
  :color="(percentage) => {
    if (percentage < 50) return 'red';
    if (percentage < 80) return 'orange';
    return 'green';
  }"
/>

В данном примере цвет линии меняется динамически в зависимости от процента выполнения задачи.

Использование статусов

<NProgress v-model:percentage="progress" status="success" />
<NProgress v-model:percentage="progress" status="error" />
<NProgress v-model:percentage="progress" status="warning" />
  • success — зеленый прогресс для успешного завершения.
  • error — красный, сигнализирует о проблеме.
  • warning — оранжевый, предупреждает о потенциальной ошибке.
  • default — стандартный синий индикатор.

Анимация и кастомизация

  • processing активирует непрерывную анимацию, полезную для неопределенных процессов.
  • stroke-linecap позволяет менять стиль окончания линии: 'round' или 'butt'.
  • Можно применять CSS-переопределения для тонкой настройки внешнего вида, например, ширины линии, закругления и тени.

Интеграция с динамическими данными

import { ref, onMounted } from 'vue';
import { NProgress } from 'naive-ui';

export default {
  setup() {
    const progress = ref(0);

    const simulateProgress = () => {
      const interval = setInterval(() => {
        if (progress.value >= 100) {
          clearInterval(interval);
        } else {
          progress.value += 5;
        }
      }, 200);
    };

    onMounted(simulateProgress);

    return { progress };
  },
  template: `<n-progress v-model:percentage="progress" show-value />`
};

Этот пример демонстрирует постепенное увеличение прогресса с имитацией загрузки данных. Использование реактивной переменной progress позволяет легко интегрировать индикатор с API-запросами или любыми асинхронными процессами.

Размеры и адаптивность

  • Свойство stroke-height позволяет задать толщину прогресс-бара, например 4 или 8.
  • Компонент корректно масштабируется под ширину контейнера, поэтому его можно использовать как в фиксированных блоках, так и во всём доступном пространстве.

Комбинация с другими компонентами

Линейный NProgress часто используют вместе с NButton для запуска действий, с NForm для отображения загрузки форм, или с NCard для визуализации состояния внутри карточек. Возможна интеграция с Vue Transition для плавного появления и исчезновения прогресс-бара.

Резюме особенностей

  • Линейный прогресс с возможностью отображения процента.
  • Настраиваемый цвет, высота и стиль линии.
  • Поддержка статусов: success, error, warning.
  • Анимация для неопределенных процессов.
  • Полная реактивность с Vue 3, возможность динамического изменения через переменные.

Использование NProgress обеспечивает гибкий и визуально приятный способ информирования пользователей о ходе выполнения процессов.

Оглавление