Question

我想用一个按钮填充整个MatrixLayoutCell，以便完全覆盖单元格。

使用CSS类增加按钮高度，但布局将其关闭。深蓝色部分是按钮所在的单元格。因此，细胞接受了高度。

我的CSS代码：

.myProductButton .sapMBtnInner{

      background-color: #0080ff !important;

      border-color: #0000a0!important;

      background-image: none !important;

      text-shadow: none !important;

      font-weight: bold !important;

      height: 200px!important;

}

我的观点中的代码段：

        var row1 = new sap.ui.commons.layout.MatrixLayoutRow("row_1");
var cell1 = new sap.ui.commons.layout.MatrixLayoutCell("cell_1");
cell1.addContent(prod1);
cell1.setBackgroundDesign('Fill1');

row1.addCell(cell1);
row1.setHeight('200px');

matrix_cell1.addRow(row1);

prod_cell1.addContent(matrix_cell1);

我尝试过几件事，但没有成功。有人知道如何在MatrixLayout中解决这个问题，还是需要将布局更改为Grid？

感谢任何提示！

Answer 1

正如@ nistv4n所说，您可以将按钮的宽度设置为100％，并使用padding:"None"删除单元格填充。

要调整高度，您可以为按钮添加样式类（您可能已经这样做过）：

prod1.addStyleClass("myProductButton");

并使用一只装满css的手来扩展高度并垂直对齐文字：

.myProductButton{
  height:200px;
  padding:0;
}
.myProductButton .sapMBtnInner{
  height:100%;
  display:flex;
  align-items:center;
}
.myProductButton .sapMBtnInner .sapMBtnContent{
  width:100%
}

jsbin上的示例。

但请注意，不建议not officially supported在同一个应用程序中使用sap.m和sap.ui.commons。

Answer 2

您可以将按钮的width属性设置为100％以适合容器。如果将padding="None"设置为单元格，则单元格末尾不会出现空格。

示例：

<layout:MatrixLayoutCell backgroundDesign="Fill1" padding="None">
   <Button text="Test Button" width="100%"/>
</layout:MatrixLayoutCell>

JSFiddle（使用XML视图，但属性相同，您需要相应地调用setPadding()和setWidth()。

关于按钮的高度：目前无法在MatrixLayout中拉伸按钮的高度。此外，我不建议改变按钮的高度 - 它具有标准化的响应高度。

SAPUI5用按钮填充整个MatrixLayoutCell

2 个答案: