Многоцветный индикатор выполнения
Контрол позволяет отобразить прогресс выполнения процесса сразу по нескольким показателям.
Многоцветный индикатор выполнения процесса реализован в классе 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"/>