Ionic 2 & ion-item with left & right text答案

【问题标题】：Ionic 2 & ion-item with left & right textIonic 2 & ion-item with left & right text
【发布时间】：2017-05-16 04:27:27
【问题描述】：

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

这看起来很简单，表面上确实如此。如here 所述，您可以使用一些 CSS 向左/向右推送文本。我发现它适用于大多数视图（例如手机），但在 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>

【问题讨论】：

标签： css ionic-framework ionic2

【解决方案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

【讨论】：

【解决方案2】：

我最终使用了item-left 和item-right。我必须使用<span> 标签，而不是上面建议的<div>，以便将事情保持在同一条线上。

我的另一个问题只是在 ionic 的响应式网格中为内容留出足够的空间。我的想法是，如果ion-card 可以很好地安装在手机上，我应该可以轻松地将 2-3 安装在平板电脑上。事实并非总是如此，具体取决于内容。

因此，如果在不同的外形尺寸上出现问题，则可能需要调整网格设置。我缺乏一些常识！

【讨论】：