Question

我们可以在SAPUI5的sap.m.Panel中将箭头图标移到右侧，我试图通过其文档搜索它但无法找到它。请建议是否可以通过一些自定义控制来做到这一点。

Answer 1

不是我所知道的首选方式，我也不知道其他任何方式。

.sapMPanelWrappingDiv .sapUiIconPointer{
   right : 0;
}

使用权限：0！important;如果不使用上述代码。

Answer 2

首先要做的事情是：我认为这不是一个很好的决定用户体验......

无论如何，从琐事到复杂，你有几种选择：

使用CSS将图标置于右侧，如santhosh所述
通过CSS（display: none;）隐藏展开图标并使用headerToolbar聚合。在那里，你可以做你想做的事情，并通过按下listerner扩展/折叠面板向右边放一个按钮
覆盖sap.m.PanelRenderer.renderHeader并在渲染器中调整图标位置

这是我的CSS解决方案（我会选择）：

.sapMPanel.myPanelIconRight .sapMPanelExpandableIcon {
  right: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.sapMPanel.myPanelIconRight .sapMPanelWrappingDiv .sapMPanelHdr, 
.sapMPanel.myPanelIconRight .sapMPanelWrappingDivTb .sapMIBar.sapMTB {
  padding-right: 0;
  margin-right: 3rem;
}

请注意myPanelIconRight控件附带的课程sap.m.Panel，以便将自定义样式与UI5 CSS分开。

BR 克里斯

在ui5的sap.m.Panel控件中移动箭头图标

2 个答案: