Проблема с выравниванием индикатора выполнения в sap.ui.layout.form. (Простая) форма - PullRequest
1 голос
/ 25 мая 2020

ProgressIndicator должны быть выровнены по вертикали в той же строке.

Текущий выход:
enter image description here

<form:SimpleForm id="idSimpleForm"
  editable="false"
  layout="ResponsiveGridLayout"
  maxContainerCols="2"
  columnsM="2"
  singleContainerFullSize="false"
  labelSpanS="5"
>
  <Label text="Lines Of Code"/>
  <Text text="{...}"/>
  <Label text="CSS"/>
  <ProgressIndicator percentValue="100" state="Success"/>
  <Text text="{...}"/>
  <Label text="XML"/>
  <ProgressIndicator percentValue="30" state="Success"/>
  <Text text="{...}"/>
  <Label text="JavaScript"/>
  <ProgressIndicator percentValue="20" state="Success"/>
  <Text text="{...}"/>
</form:SimpleForm>

Желаемый выход:
enter image description here

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Просто установите displayOnly на true.

<form:SimpleForm layout="ResponsiveGridLayout">
  <Label text="CSS"/>
  <ProgressIndicator displayOnly="true" displayValue="14k" percentValue="100" state="Information" />
  <Label text="XML"/>
  <ProgressIndicator displayOnly="true" displayValue="7.3k" percentValue="30" state="Information" />
  <Label text="JavaScript"/>
  <ProgressIndicator displayOnly="true" displayValue="2.1k" percentValue="20" state="Information" />
</form:SimpleForm>

UI5 sap.m.ProgressIndicator properly aligned with labels От: https://jsbin.com/huvokeg/edit?js, вывод

Избегайте нестандартных CSS.

0 голосов
/ 25 мая 2020

вы можете добавить класс к элементу управления индикатором выполнения и соответствующим образом переопределить стиль. например, имя класса progress-indicator.

.progress-indicator {
  margin: 0px !important;
  height: 1.25rem;
  border-radius: 1px !important;
}

.progress-indicator .sapMPIBarPositive {
  background-color: #91C8F6;
}

.progress-indicator .sapMPIBar {
  border-radius: 1px !important;
}

.progress-indicator .sapMPIBarRemaining {
  border-top-right-radius: 0rem;
  border-bottom-right-radius: 0rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

демонстрация: https://jsbin.com/meviqeb/edit?html, css, вывод

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...