sap.m.Dialog按鈕聚合中按鈕之間的空間聚合

Question

我正在使用3個按鈕進行sap.m.Dialog控件工作，我需要在左側顯示按鈕「A」，在中間按鈕「B」並按鈕「C」在右側。

請參考下面的代碼和截圖

Controller.js

var oDialog = new Dialog({ 
    title: "Dialog", 
    type: 'Message', 
    content: new Text({ text: "" }), 
    buttons : [ 
     new sap.m.Button({ 
      text: "A" 
     }), 
     new sap.m.Button({ 
      text: "B" 
     }), 
     new sap.m.Button({ 
      text: "C" 
     }) 
    ], 
    afterClose: function() { 
     oDialog.destroy(); 
    } 
}); 
oDialog.open(); 

我的解決方法：

var oDialog = new Dialog({ 
    title: "Dialog", 
    type: 'Message', 
    content: new Text({ text: "" }), 
    buttons : [ 
     new sap.m.Button({ 
      text: "A" 
     }), 
     // below added few dummy buttons to show space like effect at UI 
     new sap.m.Button({text: "", visible:true, enabled:false}), 
     new sap.m.Button({text: "", visible:true, enabled:false}), 
     new sap.m.Button({ 
      text: "B" 
     }), 
     // below added few dummy buttons to show space like effect at UI 
     new sap.m.Button({text: "", visible:true, enabled:false}), 
     new sap.m.Button({text: "", visible:true, enabled:false}), 
     new sap.m.Button({ 
      text : "C" 
     }) 
    ], 
    afterClose: function() { 
     oDialog.destroy(); 
    } 
}); 
oDialog.open(); 

它的外觀添加空按鈕

我已經添加的按鈕與空白的文本後，不知何故，我已經實現顯示空格鍵之間，但這是在加樣作用空間正道UI？或者有什麼合適的方法來滿足我的要求？

Answer 1

將與自定義CSS一起工作。插入您的manifest.json的CSS文件，

... 
    "sap.ui5": { 
    ... 
    "resources": { 
     "css": [{ 
     "uri": "css/style.css" 
     }] 
    } 
    } 

的URI的css/style.css文件中創建的style.css。在您的視圖中提供按鈕ID。在stlye.css中定位帶＃的按鈕。對齊style.css中的按鈕。

Answer 2

編輯： 另一種方法是在對話框的內容聚合中放置一個條形控件。

var dialog = new sap.m.Dialog({ 
      title: "Dialog", 
      type: 'Message', 
      content: 
       new sap.ui.layout.VerticalLayout({ 
        width:"100%", 
        content: [ 
         new sap.m.Text({ 
         text: 'One of the keys to success is creating realistic goals that can be achieved in a reasonable amount of time.'      
         }).addStyleClass("sapUiSmallMargin"), 
         new sap.m.Bar({ 
          design: "Footer", 
          contentLeft: new sap.m.Button({ text: "Button A"}), 
          contentMiddle: new sap.m.Button({ text: "Button B"}), 
          contentRight: new sap.m.Button({ text: "Button C"}) 
         }) 
        ] 
       }), 
      afterClose: function() { 
       dialog.destroy(); 
      } 
     }); 
     dialog.addStyleClass("sapUiNoContentPadding "); 

原來的答案：

您可以用百分比來響應處理其分配的寬度。由於您使用3個按鈕，因此可以爲每個按鈕分配約30％的寬度。這可能會在移動設備上導致一些問題，因爲動態添加的邊距可以使用標準的「sapUiNoMarginBegin」&「sapUiNoMarginEnd」類刪除。

代碼段：

buttons : [ 
       new sap.m.Button({ 
        text: "Button A", 
        width:"30%" 
       }).addStyleClass("sapUiNoMarginEnd").addStyleClass("sapUiNoMarginBegin"), 
       new sap.m.Button({ 
        text: "Button B", 
        width:"30%" 
       }).addStyleClass("sapUiNoMarginEnd").addStyleClass("sapUiNoMarginBegin"), 
       new sap.m.Button({ 
        text : "Button C", 
        width:"30%" 
       }).addStyleClass("sapUiNoMarginEnd").addStyleClass("sapUiNoMarginBegin") 
      ], 

Answer 3

嘗試把鍵 「A」 在聚合beginButton，在聚合endButton聚合buttons和鍵 「C」 按鈕 「B」。

Answer 4

@Prashob

使用Flexbox的控制如下：

<FlexBox height="100px" alignItems="Center" justifyContent="Center"> 
       <items> 
        <Button text="Submit" type="Emphasized" width="300px" press="submitDetails"/> 
       </items> 
      </FlexBox> 

你需要根據你需要的按鈕來更改justifyContent屬性。 對於三個按鈕，您將需要3個Flexbox，它將包含每個按鈕。也許把它們放在一邊可以使用HBOX控制。

   <HBox> 
        <items> 
         <FlexBox id="fb1" height="100px" alignItems="Center" width="400px" justifyContent="SpaceAround"> 
          <items> 
           <Button id="b1" text="Start" width="200px"/> 
          </items> 
         </FlexBox> 
         <FlexBox id="fb2" justifyContent="Center" height="100px" alignItems="Center" width="400px"> 
          <items> 
           <Button id="b2" text="Center" width="200px"/> 
          </items> 
         </FlexBox> 
         <FlexBox id="fb3" justifyContent="End" height="100px" width="400px" alignItems="Center"> 
          <items> 
           <Button id="b3" text="End" width="200px"/> 
          </items> 
         </FlexBox> 
        </items> 
       </HBox> 

檢查的如下上面的代碼的輸出：

可以將justifyContent屬性相應地改變和按鈕，並flexboxes的寬度，以獲得期望的結果。