Рейтинг

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

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

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

Отображение рейтинга

Добавьте на страницу контрол Controls/progress:Rating для показа значения.

<Controls.progress:Rating />

Задайте количество заполненных звёзд в опции value.

<!-- WML -->
<Controls.progress:Rating bind:value="_value"/>
// TypeScript 

protected _value: number = 3.56;

Дополнительно можно задать точность рейтинга. Для этого задайте опцию precision.

<!-- WML -->
<Controls.progress:Rating bind:value="_value"  
                          precision="{{0.5}}"/>

Визуальное представление

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

Отображение оценки с помощью цвета

В web-вериси возможно окрасить строку с рейтингом в зависимости от количества заполненных звёзд. Для этого необходимо задать значение dynamic для опции iconColorMode.

Пример
Исходный код
<!-- WML -->
<Controls.progress:Rating bind:value="_value"  
                          iconColorMode="dynamic"/>

Размер иконки звезд

Задайте опцию iconSize, чтобы установить размер иконки. Отступы между звездами зависят от размера звезды.

Пример
Исходный код
<!-- WML -->
<Controls.progress:Rating bind:value="_value"  
                          iconSize="{{iconSize}}"/>

Заливка пустых звезд

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

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

Установите значение full для опции emptyIconFill, чтобы отобразилась заливка пустой звезды.

<!-- WML -->
<Controls.progress:Rating bind:value="_value"  
                          emptyIconFill="full"/>

Выставление оценки

По умолчанию пользователь может изменить значение рейтинга.

Установите в опции readOnly значение true, чтобы запретить возможность изменения значения рейтинга.

Если параметр не задан явно, то его значение наследуется от родительского контрола.

<!-- WML -->
<Controls.progress:Rating bind:value="_value"  
                          readOnly="{{true}}"/>