Документация для разработчиков

API Круглого ПрогрессБара

Подключение на PHP-странице

\Bitrix\Main\UI\Extension::load("ui.progressround");

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

Метод getContainer() возвращает верстку прогресс-бара.

var myProgress = new BX.UI.ProgressRound({ 
    /*[options]*/ 
});

myProgress.getContainer()

Размер

width определяет размер (диаметр) прогрессбара.

var myProgress = new BX.UI.ProgressRound({ 
    width: 150
});

//------------

myProgress.setWidth(150);
pbr_1.png

Размер линии

lineSize определяет толщину линии прогрессбара.

var myProgress = new BX.UI.ProgressRound({ 
    lineSize: 15
});

//------------

myProgress.setLineSize(15);
pbr_2.png

Если значение lineSize выставить больше, чем половина значниея width, то получится так называемый "Пирог":

pbr_3.png


Цвет

color Определяет цвет прогресс бара.

var myProgress = new BX.UI.ProgressRound({ 
    color: BX.UI.ProgressRound.Color.DANGER
});

//------------

myProgress.setColor(BX.UI.ProgressRound.Color.DANGER);

pbr_4.png

Возможные значения:

BX.UI.ProgressRound.Color.PRIMARY //Default
BX.UI.ProgressRound.Color.SUCCESS
BX.UI.ProgressRound.Color.WARNING
BX.UI.ProgressRound.Color.DANGER

Фон

fill {boolean} добавляет фон. Цвет фона зависит от модификатора цвета указанного для бара. По умолчанию false.

BX.UI.ProgressRound({ 
    fill: true
});

pbr_5.png

Счетчик прогресса

Счетчик прогрессса может принимать любые значения {number}.

maxValue {number} - определяет максимальное значение прогресс-бара. (по умолчанию: 100)

value {number} - текущее значение прогрессбара. (по умолчанию: 0)

statusType - определяет как отображать прогрес:

BX.UI.ProgressRound.Status.PERCENT //Отображать прогрес в %.
BX.UI.ProgressRound.Status.COUNTER //Отображать прогрес счетчиком
BX.UI.ProgressRound.Status.INCIRCLE //Отображать прогрес в % внутри круга
BX.UI.ProgressRound.Status.INCIRCLECOUNTER //Отображать прогрес счётчиком внутри круга
BX.UI.ProgressRound.Status.NONE //По умолчанию. Ничего не показывать

pbr_6.png


Обновление счетчика

Для обновления счетчика используется метод update. Он принимает текущее значение прогресса (value) и высчитывает прогресс. После этого он изменяет счетчик и сам прогресс-бар.

myProgress.update(500);

Дополнительный текст

Текст можно поставить "до" или "после" прогресс-бара.

textBefore {string} - устанавливает текст перед прогресс-баром;

textAfter {string} - устанавливает текст после прогресс-бара.

var myProgress = new BX.UI.ProgressRound({ 
    textBefore: "Выполняется удаление",
    textAfter: "А может и не выполняется"
});

//------------

myProgress.setTextBefore("Выполняется удаление");
myProgress.setTextAfter("А может и не выполняется");

pbr_7.png

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2019, «1С-Битрикс», 2019
Наверх