如何更改sap.uxap.ObjectPage块的布局

Question

Demo

我这里有2 + 5个街区，在小屏幕上，每个面板都是全宽的。

但是在大​​屏幕中，块是3：3：3或6：3。我想把它们全部放在一排。

每个部分都包含在<div class="sapUiRespGridSpanL4 sapUiRespGridSpanM6 sapUiRespGridSpanS12 sapUiRespGridSpanXL3">

中

如何将其更改为class="sapUiRespGridSpanL12 sapUiRespGridSpanM12 sapUiRespGridSpanS12 sapUiRespGridSpanXL12"？

我已尝试在Panel中添加布局，但无效。

Refrence：

sap.uxap.ObjectPageLayout Documentation

layout of blocks, blocks are in the same color, hard to specify

Answer 1

您可以使用sap.uxap.BlockBase ^[API] 来包装目标控件。 BlockBase控件旨在sap.uxap.ObjectPageSubSection内使用（因此名称为<blocks>），并支持使用属性columnLayout自定义网格范围。

以下是演示：https://embed.plnkr.co/lSrDk9/?show=view%2FHome.view.xml,preview

<uxap:ObjectPageSubSection>
  <block:MyBlock columnLayout="4"/>
  <block:MyBlock columnLayout="4"/>
</uxap:ObjectPageSubSection>

Answer 2

最后1.5小时后才发现

原因：必须从BlockBase扩展Blocks以应用columnLayout。

扩展BlockBase：

"start_vdev": "NODE_ENV=development electron index.js",
"start_vprod": "NODE_ENV=production electron index.js"

然后使用上面的新ui5扩展控件创建一个视图和控制器。在您的页面中使用columnLayout

sap.ui.define(["sap/uxap/BlockBase"], function (BlockBase) {
    "use strict";

    var BlockPanel = BlockBase.extend("sap.uxap.sample.ObjectPageSubSectionSized.blocks.BlockPanel", {
        metadata: {
            /* no additional views provided */
        }
    });
    return BlockPanel;
});

如果您不扩展块基，则无法应用 columnLayout。 （这真是可怜的设计）。不过，值的范围为xmlns:sample="sap.uxap.sample.ObjectPageSubSectionSized.blocks" ... ... <uxap:blocks> <sample:BlockPanel columnLayout="4"/> </uxap:blocks> 和1-4。

Created working plnkr here

How to build custom SAPUI control?

Answer 3

提供一种不优雅但非常快速的方法：覆盖CSS

<uxap:ObjectPageSubSection class="fullWidthPanel">

/* CSS specificity */
.fullWidthPanel .sapUiRespGrid.sapUiRespGridHSpace1 > div {
  width: 98.88888889%;
  width: -webkit-calc(100% - 1rem);
  width: calc(100% - 1rem)
}