Cx Framework: Как установить выравнивание: правая и десятичная точность на NumberField
Я работаю над проектом, где IU делается в Cx
, новый React
основанный Framework для FrontEnd. https://cxjs.io/
У меня есть сетка с полями фильтра в верхней части каждого столбца.
Например, это номер столбца и поля:
{
field: 'score', sortable: true,
header: {
style: 'width: 150px',
items: <cx>
<div>
Score
<br />
<NumberField style="width:100%;margin-top:5px" value:bind="$page.filter.score"
reactOn="enter blur"/>
</div>
</cx>
},
},
Но значение находится на левой стороне, и мне нужно это справа. Я хочу, чтобы и сетка, и значение поля фильтра были справа, но оставляли имя столбца слева. Как обычно в Excel. Кроме того, как установить пользовательский десятичный номер, например, 2?
1 ответ
NumberField
виджеты позволяют устанавливать дополнительные стили для элемента ввода через inputStyle
, Форматирование выполняется с использованием format
, Заголовки столбцов сетки могут устанавливать свои собственные стили, используя только style
,
Учитывая все это, это должно быть примерно так:
{
field: "score",
sortable: true,
header: {
style: "width: 150px; text-align: left",
items: (
<cx>
<div>
Score
<br />
<NumberField
value:bind="$page.filter.score"
format="n;2"
style="width:100%;margin-top:5px"
inputStyle="text-align: right"
reactOn="enter blur"
/>
</div>
</cx>
)
}
}