Sapui5列調整

這是我的看法文件看起來像：Sapui5列調整

<mvc:View 
controllerName="abc" 
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:form="sap.ui.layout.form" 
xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
xmlns:core="sap.ui.core"> 
<App> 
    <pages> 
     <Page title="APP_TITLE" showHeader="false"> 
      <content> 
       <Table id="configTable" mode="None" items="{ path : '/'}"> 
        <columns> 
         <Column id="bname"> 
                 <Text text="BOOKING_NAME"></Text> 
         </Column> 
         <Column>       <Button icon="sap-icon://message-information" text="Info" type="Emphasized" press="handleMessagePopoverPress"/> 
         </Column> 
         <Column hAlign="Right" id="addItem" width="2em"></Column> 

        </columns> 
       </Table> 
      </content> 
      <footer> 
       <Toolbar class="sapContrast sapContrastPlus" width="100%"> 
       </Toolbar> 
      </footer> 
     </Page> 
    </pages> 
</App>

這將產生如下界面：

，你可以看到這個按鈕只是破壞在整個專欄中，BOOKING_NAME下有很多空間，我怎樣才能調整按鈕到列的大小，使其不會劃傷所有內容？如果我可以對齊文本到列的中心這是不可能的，我試過VALIGN =「中間」，但什麼都沒有改變.....我不覺得在sapui5 DOC什麼

來源

2017-08-11 Nali

實際上只是通過在佈局增加另一列和，而不是使用一個按鈕，圖標解決了這個我剛執行的圖標

<mvc:View 
controllerName="local.controller" 
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:form="sap.ui.layout.form" 
xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
xmlns:c="sap.ui.core">

and the column of the following：

        <c:Icon src="sap-icon://message-information" size="1em" id="infoDefaultCurrency" press="onInfoButtonPressed" />

來源

2017-08-28 20:34:39 Nali

-1

簡單的解決方法將是使用css.You可以使用sapui5預定義的邊界類爲此。

jQuery.sap.require("sap.m.MessageToast"); 
 
sap.ui.controller("local.controller", { 
 

 
    doSomething: function() { 
 
    sap.m.MessageToast.show("Hello UI5 World"); 
 
    } 
 

 
}); 
 

 
var oModel = new sap.ui.model.json.JSONModel({ 
 
    people: [{ 
 
     name: 'Joseph', 
 
     number: 1.618 
 
    }, 
 
    { 
 
     name: 'DJ', 
 
     number: 0 
 
    } 
 
    ] 
 
}); 
 

 
var oView = sap.ui.xmlview({ 
 
    viewContent: jQuery('#view1').html() 
 
}); 
 
oView.setModel(oModel); 
 
oView.placeAt('content');

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 
    <meta charset="utf-8"> 
 

 
    <title>MVC with XmlView</title> 
 

 
    <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script> 
 

 
    <script id="view1" type="sapui5/xmlview"> 
 
    <mvc:View controllerName="local.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> 
 
     <App> 
 
     <pages> 
 
      <Page title="APP_TITLE" showHeader="false"> 
 
      <content> 
 
       <Table id="configTable" mode="None" items="/people"> 
 
       <columns> 
 
        <Column id="bname"> 
 
        <Text text="BOOKING_NAME" class="sapUiSmallMarginTop"></Text> 
 
        </Column> 
 
        <Column> 
 
        <Button icon="sap-icon://message-information" text="Info" type="Emphasized" press="handleMessagePopoverPress" /> 
 
        </Column> 
 
        <Column hAlign="Right" id="addItem" width="2em"></Column> 
 

 
       </columns> 
 
       </Table> 
 
      </content> 
 
      <footer> 
 
       <Toolbar class="sapContrast sapContrastPlus" width="100%"> 
 
       </Toolbar> 
 
      </footer> 
 
      </Page> 
 
     </pages> 
 
     </App> 
 
    </mvc:View> 
 
    </script> 
 
</head> 
 

 
<body class='sapUiBody'> 
 
    <div id='content'></div> 
 
</body> 
 

 
</html>

我已在示例中使用sapUiSmallMarginTop

來源

2017-08-11 14:24:51

不要濫用代碼塊。由於某些原因，不允許您將鏈接發佈到在線ide的規則不存在。不要濫用代碼塊來克服此限制 –

請不要在您的帖子下留下簽名。 – Glorfindel

Sapui5列調整

回答

相關問題