sapui5 - sap.ui.layout.form.(Simple)Form 中的进度指示器对齐问题
问题描述
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>
解决方案
只需设置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。
推荐阅读
- angular - 角反应形式关键变化检测
- javascript - 菜单正在折叠但没有折叠?
- reactjs - 如何从子组件渲染父组件中的路由组件
- go - 如何从 Go Gin 上下文中找到请求方法?
- ios - AVAssetExportSession 导出视频 AVFoundationErrorDomain Code=-11841 错误
- jquery - 为什么 $.post 的数据为空
- python - 创建 ctypes 数组以使用 sendinput 发送扩展扫描码
- javascript - 如何使用 Node.js 将“\n”写为文件内的值
- html - Create a table of subject using html and ruby
- flutter - How to fetch user's current location using HERE maps in flutter?