ProgressIndicator
应该在同一行中垂直对齐。
<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>
您可以将一个类添加到进度指示器控件,并相应地重新定义样式。例如班级名称为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;
}
仅将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>
发件人:https://jsbin.com/huvokeg/edit?js,output
避免使用自定义CSS。