Декораторы

Декоратор — это красивая "обертка", которая позволяет представить числа в удобном для восприятия формате.

Общие настройки для числовых и денежных декораторов

Декорируемое число

Декорируемое число необходимо передать в опцию 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"/>