如何在 IONIC2 中添加图标按钮标签并在一行中一起输入

Question

在休耕代码中，我尝试将 3 个元素加在一起，但它失败了，按钮没有显示在输出中

<ion-content>
  <ion-item>
    <ion-label fixed>Origin</ion-label>
    <ion-input type="text" value=""></ion-input>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="locate"></ion-icon>
      </button>
    </ion-buttons>
  </ion-item>
  <ion-item>
    <ion-label fixed>Target</ion-label>
    <ion-input type="text" value=""></ion-input>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="locate"></ion-icon>
      </button>
    </ion-buttons>
  </ion-item>
<button ion-button full>Start</button>
</ion-content>

它单独显示每个项目或将带有标签的文本一起显示，但按钮未显示在文本框的末尾。

Answer 1

一种方法是使用 ion-row，ion-col 以您需要的格式排列。在这里查看例：

 <ion-row>
    <ion-col width-80>
       <ion-item> <ion-label fixed>Origin</ion-label> <ion-input type="text" value=""></ion-input> </ion-item>
    </ion-col>
    <ion-col> 
    <button ion-button icon-only> <ion-icon name="locate"></ion-icon> </button>
 </ion-col>  
</ion-row>