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

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

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

Чтобы отобразить многоцветный индикатор, задайте массив цветных секторов индикатора в опции 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"/>