如何将一个按钮放在离子3的页脚中？

Question

我想实现ion-footer中的三个ion-button，每个分别对应左边，中间和右边。 看来ion-button的start和end可以做左和右。

中间怎么样？我已经检查了API和离子组件，看起来ion-title默认为居中，但是没有开箱即用的方式来获取中间的按钮？

Answer 1

在ion-footer元素中，尝试使用ion-grid，然后从网格中删除填充。

<ion-footer> 
    <ion-grid> 
     <ion-row no-padding no-margin> 
      <ion-col col-4 no-padding> 
       <button ion-button full>Button 1</button> 
      </ion-col> 
      <ion-col col-4 no-padding> 
       <button ion-button full>Button 2</button> 
      </ion-col> 
      <ion-col col-4 no-padding> 
       <button ion-button full>Button 3</button> 
      </ion-col> 
     </ion-row> 
    </ion-grid> 
</ion-footer> 

Answer 2

您可以分别将float-start和float-end添加到第一个和第三个按钮。通过利用float-[start|end]代替float-[left|right]你的按钮就会移动位置与应用程序direction

HTML：

<ion-footer> 
    <div class="btn-wrapper"> 
    <button ion-button float-start>Button1</button> 
    <button ion-button>Button2</button> 
    <button ion-button float-end>Button3</button> 
    </div> 
</ion-footer> 

CSS：

.btn-wrapper { 
    text-align: center; 
} 

编辑： 增加了包装为<div>按钮，并给它的风格text-align: center;，因为我遇到奇怪的动画行为没有包装<div>。