Многоцветный индикатор выполнения

Контрол позволяет отобразить прогресс выполнения процесса сразу по нескольким показателям.

Многоцветный индикатор выполнения процесса реализован в классе Controls/progress:StateBar.

Пример
Исходный код

Документация API Спецификация Axure

Чтобы отобразить многоцветный индикатор, задайте массив цветных секторов индикатора в опции data. Количество элементов массива определяет количество секторов индикатора.

Для каждого элемента массива необходимо указать:

  • title - название сектора;
  • value - размер от 0 до 100 (процентное значение) сектора индикатора;
  • style - цвет сектора индикатора.
<!-- WML -->
<Controls.progress:StateBar 
    data="{{[{value: 10, style: 'success', title: 'Выполнено'}]}}"/>

Направление отображения прогресса

Поддерживается возможность настроить направление отображения прогресса - слева направо или справа налево.

Пример
Исходный код

По умолчанию прогресс отображается слева направо. Чтобы изменить направление, установите значение right для опции align.

<!-- WML -->
<Controls.progress:StateBar 
    data="{{[{value: 10, style: 'success', title: 'Выполнено'}]}}"
    align="right"/>

Цвет незаполненной области индикатора

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

Пример
Исходный код

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

<!-- WML -->
<Controls.progress:StateBar 
    data="{{[{value: 10, style: 'success', title: 'Выполнено'}]}}"
    align="right"
    blankAreaStyle="success"/>