使sap.m.CustomTile的分辨率可以調整大小從500px到320px

我用sap.m.FormattedText定製了sap.m.CustomTile。我需要這個CustomTile根據顯示分辨率調整大小，例如從500像素到320像素。我用於此：使sap.m.CustomTile的分辨率可以調整大小從500px到320px

@media only screen and (max-width: 500px) { 

    .tileSmall.sapMCustomTile { 
     width: 80.9vw !important; 
     height: 80.9vw !important; 
    } 

} 

@media only screen and (max-width: 320px) { 

    .tileSmall.sapMCustomTile { 
     width: 200px !important; 
     height: 200px !important; 
    } 

}

我不能使用％，因爲它在我的應用程序中表現奇怪。所以我想用vw代替。我做了demo。我想所有的時間保持它，因爲它爲530px分辨率在：

但是，當分辨率是例如改變417px我：

我得到的分辨率357px：

有什麼辦法如何錨尾和子頁腳（最後兩行）？

或如何根據瓷磚高度change間隙的高度（由br標籤創建）？

感謝您的任何建議。

來源

2017-05-31 Jaro

因爲您在自定義圖塊內部使用VBox，所以實現您想要的功能相當容易。您可以查看Size Adjustments Explored演示以獲取更多示例。

其基本思想是你可以在VBox內部玩弄每個項目的增長/縮小因子。默認情況下，VBox的所有項目都被平等對待，並被拉伸以填充可用空間。因爲您希望頁眉和頁腳得到修復，所以您應該將這些項目的shrinkFactor（默認值= 1）和growFactor（默認值= 0）設置爲0。

瓷磚的中心應該只是「空白」，填補了可用空間的休息，所以你可以給它growFactor和shrinkFactor等於1。你也不需要把br在裏面，因爲物品會動態增長/縮小以填充剩餘空間。

您可以使用layoutData聚合和傳遞FlexItemData元素爲每個UI5元素添加這些因子。

另一個小改變是，您應該爲VBox指定width: "100%"和height: "100%，以確保其大小根據拼塊的大小進行調整。

頁眉/頁腳

new sap.m.FormattedText({ 
     htmlText: "whatever you have now", 
     layoutData: new sap.m.FlexItemData({ 
     shrinkFactor: 0 
     }) 
    });

中心

new sap.m.FormattedText({ 
     htmlText: "no need to put anything here", 
     layoutData: new sap.m.FlexItemData({ 
     shrinkFactor: 1, 
     growFactor: 1 
     }) 
    });

你可以找到這個解決方案在這裏的工作版本：http://jsbin.com/tirizanaje/1/edit?html,css,output

來源

2017-06-03 09:33:00

謝謝謝爾班。 – Jaro

使sap.m.CustomTile的分辨率可以調整大小從500px到320px

回答

相關問題