2017-05-16 2 views
1

私は現在、Ionic 2アプリのリストを持っています。また、仕切りは最後の要素だけの全幅です。Ionic 2 list full width divider

enter image description here

私はすべての要素が全幅の境界線になりたい: はここでの結果です。これについてのドキュメントで何も見つかりませんでした..あなたの助けを前にありがとう! EDIT

<ion-list no-padding=""> 
    <ion-item *ngFor='let like of likes' (click)="goTo(like.qrcode)" text-wrap> 
     <ion-thumbnail item-left> 
      <img class="item item-thumbnail-left" [src]="like.logo"> 
     </ion-thumbnail> 
     <h2>{{like.name}}</h2> 
     <h3 class="establishment">{{like.type}}<br /></h3> 
     <p class="establishment">{{like.city}}<br /></p> 
     <!--<button ion-button clear item-right>View</button>--> 
    </ion-item> 
</ion-list> 
+0

あなたのコード –

答えて

2

あなたはカスタムスタイルルールを(全幅せずに境界線を隠すために)no-lines属性を使用して追加で境界線を追加することを行うことができます:ここに は私のコードですそれらの項目で。 this plunkerをご覧ください。あなたのビューでそう

<ion-list> 
     <ion-item no-lines class="bottom-border" *ngFor=".."> 
      ... 
     </ion-item> 
    </ion-list> 

そして.scssファイルに:

.item[no-lines].bottom-border { 
    border-bottom: 1px solid grey; 
} 
+1

を共有するにはありがとう、私はちょうど:-) CSSでそれをやって考えていませんでした – saperlipopette