css - Ionic 2 和带有左右文本的 ion-item

Question

在 ionic 2 应用程序中，我只想创建一个可点击的 <ion-item>左侧和右侧都有文本的按钮。它适用于支票查看器(左侧为日期，右侧为金额)。

这看起来很简单，表面上也是如此。如前所述here你可以使用一些 CSS 将文本向左/向右推送。我发现它适用于大多数 View (例如手机)，但在 iPad 上该元素显示效果不佳。

下面是我的代码和生成的 iPad 视觉效果的一些示例。有没有一种干净的方法可以做到这一点？

              <button ion-item *ngFor="let settlement of recentSettlements | slice:0:3" (click)="showSettlement(settlement)">
                <span class="floatLeft">{{settlement.checkDate.slice(0,10)}}</span>
                <span class="floatRight" [ngClass]="(settlement.checkTotal >= 0) ? 'positiveAmount' : 'negativeAmount'">${{settlement.checkTotal}}</span>            
              </button>

或者

              <button ion-item *ngFor="let settlement of recentSettlements | slice:0:3" (click)="showSettlement(settlement)">
                <ion-label item-start>{{settlement.checkDate.slice(0,10)}}</ion-label>
                <ion-label item-end [ngClass]="(settlement.checkTotal >= 0) ? 'positiveAmount' : 'negativeAmount'">${{settlement.checkTotal}}</ion-label>            
              </button>

Answer 1

你不需要接触CSS，你可以通过Ionic自己的指令来做到这一点:

<ion-list>
  <ion-item *ngFor="let n of whatever" (click)="doSmt(n)">
    <div item-left>Left</div>
    {{n.someProperty}}
    <div item-right>Right</div>
  </ion-item>

</ion-list>

来自文档:https://ionicframework.com/docs/components/#icon-list