왼쪽 및 오른쪽 텍스트가있는 이온 2 및 이온 항목

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

나는 결국 item-left과 item-right을 사용했습니다. 위의 제안대로 <span> 태그가 아닌 <div> 태그를 사용해야 만했습니다. 동일한 줄에 내용을 유지하려면

다른 문제는 단순히 이온 반응성 그리드의 내용에 충분한 공간을 남겨 두었습니다. 내 생각에 ion-card이 휴대 전화에 잘 맞으면 태블릿에 2-3을 쉽게 맞출 수 있어야합니다. 내용에 따라 항상 그런 것은 아닙니다.

따라서 폼 팩터에 따라 문제가 발생하면 그리드 설정을 조정해야 할 수 있습니다. 내 상식에 부족한 상식!

Answer 2

당신은 당신이 이온의 자신의 지시를 통해 그것을 할 수 있습니다, CSS를 접촉 할 필요가 없습니다 :

<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