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

Общее

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

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

Базовый шаблон

.ui-progressbar имеет по умолчанию свойство display: flex.


<!-- .ui-progressbar > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:70%;"></div>
    </div>
</div>

За прогресс отвечает элемент <div class="ui-progressbar-bar" style="width:70%;"></div>. В атрибут style в свойстве width вписаное значение будет определять размер шкалы прогресса. Для удобства рекомендуется записывать значения в %.

Размеры

LG

Модификатор .ui-progressbar-lg.


<!-- .ui-progressbar.ui-progressbar-lg > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-lg">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
</div>

MD

Модификатор .ui-progressbar-md.


<!-- .ui-progressbar.ui-progressbar-md > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-md">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
</div>

Цвета

Primary

Модификатор .ui-progressbar-primary. Цвет по умолчанию.

<!-- .ui-progressbar > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
</div>

<!-- .ui-progressbar.ui-progressbar-primary > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-primary">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
</div>

Success

Модификатор .ui-progressbar-success.

<!-- .ui-progressbar.ui-progressbar-success> .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-success">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
</div>

Warning

Модификатор .ui-progressbar-warning.

<!-- .ui-progressbar.ui-progressbar-warning> .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-warning">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
</div>

Danger

Модификатор .ui-progressbar-danger.

<!-- .ui-progressbar.ui-progressbar-danger> .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-danger">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
</div>

Фон

Модификатор .ui-progressbar-bg добавляет фон. Цвет фона зависит от модификатора цвета, указанного для бара. Например, для .ui-progressbar.ui-progressbar-success фон будет светло-зеленым, как в примере ниже.



<!-- .ui-progressbar.ui-progressbar-bg > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-bg">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
</div>

<!-- .ui-progressbar.ui-progressbar-bg.ui-progressbar-success > .ui-progressbar-track > .ui-progressbar-bar -->
<div class="ui-progressbar ui-progressbar-bg ui-progressbar-success">
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
</div>

Текст

Текст может быть перед, либо после бара. Для этого есть 2 контейнера с определенными классами .ui-progressbar-text-before и .ui-progressbar-text-after соответственно.


Выполняется удаление
594 из 80 042

<!-- .ui-progressbar > .ui-progressbar-text-before + (.ui-progressbar-track > .ui-progressbar-bar) + .ui-progressbar-text-after -->
<div class="ui-progressbar">
    <div class="ui-progressbar-text-before">Выполняется удаление</div>
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
    <div class="ui-progressbar-text-after">594 из 80 042</div>
</div>

Прочее

Для того что бы расположить элементы прогрессбара в столбик, используйте модификатор .ui-progressbar-column.


Выполняется удаление
594 из 80 042

<!-- .ui-progressbar.ui-progressbar-column > .ui-progressbar-text-before + (.ui-progressbar-track > .ui-progressbar-bar) + .ui-progressbar-text-after -->
<div class="ui-progressbar ui-progressbar-column">
    <div class="ui-progressbar-text-before">Выполняется удаление</div>
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
    <div class="ui-progressbar-text-after">594 из 80 042</div>
</div>

Также можно использовать цветовые палитры. Будет это выглядеть так:


Выполняется удаление
594 из 80 042

<!-- .ui-progressbar.ui-progressbar-warning.ui-progressbar-bg > .ui-progressbar-text-before + (.ui-progressbar-track > .ui-progressbar-bar) + .ui-progressbar-text-after -->
<div class="ui-progressbar ui-progressbar-warning ui-progressbar-bg">
    <div class="ui-progressbar-text-before">Выполняется удаление</div>
    <div class="ui-progressbar-track">
        <div class="ui-progressbar-bar" style="width:30%;"></div>
    </div>
    <div class="ui-progressbar-text-after">594 из 80 042</div>
</div>


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

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

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

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

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