Полосы прогресса
Общая информация
Использование полос прогресса связано с определением статуса загрузки/нагрузки чего-либо. 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 параметра
HTMLElement или строковая ссылка на элемент
Объект опций
Стратегия создания (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
template - HTML строка шаблона для .progress-bar
create - функция создания прогресс бара
progress - изменение размера прогресс бара
Last updated