Question

在离子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>

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

Answer 2

我最终使用item-left和item-right。我必须使用<span>标记，而不是上面建议的<div>，以便将内容保持在同一行。

我的另一个问题是在离子的响应网格中为内容留下足够的空间。我的想法是，如果ion-card适合手机，我应该能够轻松地在平板电脑上安装2-3。事实证明，并非总是如此，具体取决于内容。

因此，如果事情在不同的形状因素上被粉碎，则可能需要调整网格设置。我缺乏一些常识！

离子2＆amp;带有左和右的离子项正确的文字

2 个答案: