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的宽度，以获得期望的结果。