如何以不可编辑的形式垂直对齐复选框？ [英] How to align checkboxes vertically in a non-editable form?

问题描述

SAPUI5简单格式不会使复选框垂直居中对齐。

SAPUI5 simple form does not make the checkboxes vertically center align.

此处代码是：

<form:SimpleForm title="{i18n>wizardDateLocation}"
  minWidth="1024"
  editable="false"
  layout="ResponsiveGridLayout"
>
  <Label text="{i18n>wholeDay}"/>
  <CheckBox selected="{/IsAllDay}" editable="false"/>
  <Label text="{i18n>date}" visible="{= ${/IsAllDay}}" required="true"/>
  <Text text="{/Start}" visible="{= ${/IsAllDay}}"/>
  <HBox></HBox>
  <Label text="{i18n>from}" visible="{= !${/IsAllDay} }" required="true"/>
  <Text text="{/Start}" visible="{= !${/IsAllDay} }"/>
  <Label text="{i18n>to}" visible="{= !${/IsAllDay} }" required="true"/>
  <Text text="{/End}" visible="{= !${/IsAllDay} }"/>
  <Label text="{i18n>isOnlineMeeting}" required="false"/>
  <CheckBox selected="{/IsOnlineMeeting}" editable="false"/>
  <Label text="{i18n>location}" required="{= !${/IsOnlineMeeting} }"/>
  <Text text="{/LocationName}"/>
  <Label text="{i18n>weblink}" required="{/IsOnlineMeeting}"/>
  <Text text="{/WebLink}"/>
  <Link press="editStepTwo" text="{i18n>edit}"/>
</form:SimpleForm>

如何解决此问题？

推荐答案

UI5为通常可编辑但以不可编辑形式出现的控件提供 displayOnly 属性。

UI5 provides displayOnly property for controls that are usually editable but occur in a non-editable form.

因此，与其使整个表单可编辑，这是矛盾的，因为其余的表单字段只是文本（不可编辑），请尝试启用 displayOnly 在CheckBoxes上。

Hence, instead of making the whole form editable, which is contradictory since the rest of the form fields are just texts (non-editable), try enabling displayOnly on CheckBoxes.

<form:SimpleForm editable="false">
  <!-- ... -->
  <CheckBox displayOnly="true" />
  <!-- ... -->
</form:SimpleForm>

来自 API参考：

displayOnly

设置为 true 时， CheckBox 不是交互式的，不可编辑的，不可聚焦的且不在选项卡链中。 此设置在查看模式下用于表单。

如果启用的属性设置为false，则此属性无效。

displayOnly

When set to true, the CheckBox is not interactive, not editable, not focusable and not in the tab chain. This setting is used for forms in review mode.
When the property enabled is set to false this property has no effect.

这篇关于如何以不可编辑的形式垂直对齐复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！