Форматирование чисел с Q-Number
Существует два варианта отображения: inline и wide
С чего начать
Подключите модуль
import { QNumberModule } from '@diasoft/qpalette-visual';Встройте компонент с помощью тэга q-number.
Inline
Расположение символа
Мы увеличили нашу прибыль на '103.12345' | qNumberFormatter
В этом квартале она составила '17946.12' | qNumberFormatter
ПайпqNumberFormatterпредставляет собой парсер строк. Он удаляет из строки символы, не относящиеся к числовым. Если данные с сервера представляют собой не числа, а строки, содержащие, например, пробел и символ денежной единицы, используйте эту директиву. В противном случае, можно обойтись стандартный пайпомnumber.
Изменение расстояния между символом и числом
Если требуется задать некое расстояние между символом и числом, можно воспользоваться свойствомgap:
4567 | number
Wide
| Знак слева | Знак справа | |
|---|---|---|
| Прилегание слева | <q-number sign="¥" [wide]="true" align="left" signposition="left"> '¥-1234567.89' | qNumberFormatter </q-number> | <q-number sign="@" [wide]="true" align="left" signposition="right"> '4560.234242' | qNumberFormatter </q-number> |
| Прилегание справа | <q-number sign="#" [wide]="true" align="right" signposition="left"> '-15$' | qNumberFormatter </q-number> | <q-number sign="€" [wide]="true" align="right" signposition="right"> '889' | qNumberFormatter </q-number> |
Настройка онлайн
Акции Alphabet подорожали на number.value | qNumberFormatter в четверг, и ее рыночная капитализация достигла $1 трлн.
number.value | qNumberFormatter Значение Знак РасстояниеРассположение Прилегание