Полосы прогресса

Общая информация

Использование полос прогресса связано с определением статуса загрузки/нагрузки чего-либо. PipUI дает возможность без особых усилий добавить такие полосы в свое приложение.

Пример прогресс бара

<div class="progress" data-progress-type="linear">
    <div class="progress-bar" style="width: 35%;"></div>
    <div class="progress-text">35%</div>
    <div class="progress-label">Label text</div>
</div>

Пример работы кода выше

Атрибут data-progress-type является обязательным, т.к. для каждого типа прогресса своя стратегия обработки стилей и скриптов.

На данный момент поддерживаются 2 типа полос прогресса: linear и radial

Т.к. radial тип работает совершенно иначе, нежели linear. Его инициализация требуется через canvas и javascript.

<div id="progressbar" class="progress" data-progress-type="radial">
    <canvas class="progress-bar" data-progress-size="20"></canvas>
    <div class="progress-text">Text</div>
    <div class="progress-label">Label</div>
</div>

<script>
    let progress = new PipUI.Progress('#progressbar', {styles: {width: '200px', height: '20'}});
</script>

Javascript

Управление полосой прогресса можно производить через Javascript, обращаясь к экземпляру класса PipUI.Progress

<div id="progress"></div>

<script>let progress = new PipUI.Progress('#progress', {}, true);</script>

Класс PipUI.Progress поддерживает 3 параметра

1. HTMLElement или строковая ссылка на элемент

2. Объект опций

3. Стратегия создания (true/false)

В примере выше мы передали 3й параметр, который означает, что прогресс бар будет создан из опций, которые мы должны указать во втором параметре.

Опции

// Выводить в консоль отладку
debug: false

// Текст прогресс бара
text: ''

// Дополнительный текст для прогресс бара
label: ''

// Размер прогресс бара в процентах
progress: 0

// Тип прогресс бара
type: 'linear'

// Объект настроек стилей
styles: {
    width: '100%'
    height: '28px'
    padding: 4
    barColor: '#fff'
    progressColor: '#212121'
}

// Объект настроек шаблона
templates: {
    text: '<div class="progress-text"></div>'
    label: '<div class="progress-label"></div>'
}

// Объект типов
types: {...}

Методы

let progress = new PipUI.Progress('#progress');

progress.getID() // Вернет уникальный идентификатор

progress.setOptions(object) // Изменить опции. DOM не будет изменен
// до вызова метода progress.update()

progress.getOptions() // Получить опции

progress.setProgress(float) // Изменить размер прогресс бара в процентах. DOM будет обновлен

progress.setText(string) // Изменить текст прогресс бара. DOM будет обновлен

progress.setLabel(string) // Изменить дополнительный текст. DOM будет обновлен
 
progress.update() // Обновить DOM

События

Триггер	Описание	Инициатор
change-progress-pipui	Срабатывает при изменении размера полосы прогресс бара	.progress
change-text-progress-pipui	Срабатывает при изменении текста внутри прогресс бара	.progress
change-label-progress-pipui	Срабатывает при изменении дополнительного текста прогресс бара	.progress
update-progress-pipui	Срабатывает при полном обновлении прогресс бара	.progress

Типы прогресс баров

Для изменения типов прогресс баров, необходимо передать в объект types опций свои параметры.

Важно чтобы тип имел в себе 3 обязательных ключа: template, create, progress

1. template - HTML строка шаблона для .progress-bar

2. create - функция создания прогресс бара

3. progress - изменение размера прогресс бара