Декораторы
Декоратор — это красивая "обертка", которая позволяет представить числа в удобном для восприятия формате.
Документация API Спецификация Axure
Общие настройки для числовых и денежных декораторов
Декорируемое число
Декорируемое число необходимо передать в опцию value.
Цвет
Цвет числа может сообщать об ошибке или успехе, а также с его помощью можно акцентировать внимание пользователя.
Цвет числа настраивается в опции fontColorStyle.
<Controls.decorator:Number
value="{{_value}}"
fontColorStyle="unaccented"/>
Размер шрифта
С помощью управления размером шрифта также можно управлять вниманием пользователя.
Размер шрифта настраивается в опции fontSize.
<Controls.decorator:Number
value="1234567"
fontSize='{{value}}'/>
Начертание шрифта
Для отображения полужирного шрифта, передайте в опцию fontWeight значение bold.
<Controls.decorator:Number
value="{{_value}}"
fontWeight="bold"/>
Отрицательные числа
Для отображения только неотрицательных чисел, передайте в опцию onlyPositive значение true.
<Controls.decorator:Number
value="{{_value}}"
onlyPositive="true"/>
Зачеркивание
Для отображения зачеркнутых чисел, передайте в опцию strocked значение true.
<Controls.decorator:Number
value="{{10}}"
stroked="{{true}}"/>
Округление
Если число занимает много места, а его маленькие значения не имеют смысловую нагрузку, такое число можно сократить. Происходит отбрасывание разряда и число выводится в формате 1К, 1,5К и т.п. или 1 тыс., 1 млн.
Тип аббревиатуры настраивается в опции abbreviationType. <UINewDesign.components.AutodocDemoComponent.DemoComponent require="Controls-demo/Decorator/Number/Abbreviation/Index" index="{{7}}" isWasaby="{{true}}"/>
<Controls.decorator:Number
value="{{1240}}"
abbreviationType="long"/>
Разбиение на триады
Для отключения разбиения числа на триады, передайте в опцию useGrouping значение false.
<Controls.decorator:Number
value="{{_value}}"
useGrouping="false"/>
Подчеркивание при наведении
Для подчеркивания числа при наведении на него курсора, передайте в опцию underline значение hovered.
<Controls.decorator:Number
value="{{_value}}"
underline="hovered"/>
Подсветка текста
Для подсветки текста передайте его значение в опцию highlightedValue.
<Controls.decorator:Number
value="{{98765.11}}"
highlightedValue="{{5.11}}"/>
Числовые декораторы
В статье описаны дополнительные настройки для числового формата.
Количество знаков после запятой
Количество знаков, отображаемых после запятой, настраивается в опции precision. Поддерживается диапазон значений от 0 до 20. <UINewDesign.components.AutodocDemoComponent.DemoComponent require="Controls-demo/Decorator/Number/Precision/Index" index="{{11}}" isWasaby="{{true}}"/>
<Controls.decorator:Number
value="{{_value}}"
precision="{{_precision}}"/>
Режим форматирования дробной части
Режим форматирования дробной части числа настраивается в опции roundMode.
Варианты значений:
round
- число округляется, а дробная часть дополняется нулями, чтобы она имела заданную длину.trunc
- усекает (отсекает) цифры справа от точки так, чтобы дробная часть имела заданную длину, независимо от того, является ли аргумент положительным или отрицательным числом.
<Controls.decorator:Number
value="{{_value}}"
precision="{{_precision}}"
roundMode="round"/>
Тултип
Текст всплывающей подсказки, отображаемой при наведении курсора мыши, настраивается в опции tooltip.
<Controls.decorator:Number
value="{{_value}}"
tooltip="{{_tooltip}}"/>
Денежные декораторы
Денежный формат числа состоит из неограниченной целой части и двух знаков в дробной части. В статье описаны дополнительные настройки для денежного формата числа.
Отображение знаков валюты
Для отображения доступны знаки рубля, доллара и евро. Вид отображаемого знака настраивается в опции currency.
<Controls.decorator:Money
value="{{_value}}"
currency="Dollar"/>
Расположение знака валюты
Для отображения знака валюты слева от числа, передайте в опцию currencyPosition значение left.
<Controls.decorator:Money
value="{{_value}}"
currency="Dollar"
currencyPosition="left"/>
Размер знака валюты
Размер знака валюты настраивается в опции currencySize.
<Controls.decorator:Number
value="{{_value}}"
currency="Dollar"
currencySize="l"/>
Скрытие копеек
Чтобы скрыть отображение копеек, когда их значение равно нулю, передайте в опцию showEmptyDecimals значение false.
<Controls.decorator:Number
value="{{_value}}"
showEmptyDecimals="false"/>