2016-08-02 31 views
5

Sadece başlangıç ​​ve bitiş sınırlarını kaldırmak istediğinizde. Bu programlama dili çok yeni. Liste görüntülemek için aşağıdaki kodu kullanıyorum.İyonik 2 başlangıç ​​ve bitiş kenarlığı iyonik liste etiketini kaldırın

<ion-content> 
<ion-list class="item"> 
    <ion-item href="#"> 
    Hello! 
    </ion-item> 
    <ion-item href="#"> 
    Hello2 
    </ion-item> 

</ion-list> 
     </ion-content> 

Belirtilen ekran görüntülerinde vurgulanan kırmızı renkli daire kenar çizgilerini kaldırmam gerekiyor. Nasıl yapılır?

<ion-list no-lines>...</ion-list> 

ama bu da öğelerin hatları kaldırır: enter image description here

cevap

11

bir yolu böyle ion-list eleman no-satırları eklemek olacaktır. Yani alt yalnızca o çizgiyi kaldırmak için bu stil kuralını ekleyebilirsiniz: benim için çalıştı

.md ion-list > .item:last-child, 
.md ion-list > .item-wrapper:last-child .item, 
.wp ion-list > .item:last-child, 
.wp ion-list > .item-wrapper:last-child .item, 
.ios ion-list > .item:last-child, 
.ios ion-list > .item-wrapper:last-child .item { 
    border-bottom: none; 
} 
6

çözüm oldu

.list-ios>.item-block:first-child { 
    border-top: none; 
} 
.list-ios>.item-block:last-child { 
    border-bottom: none; 
} 

GÜNCEL tam bir almak istiyorsanız iyon öğesinde satırları kaldırmak için öne doğru uzatın, sadece iyon listesi elemanına no-lines özniteliği ekleyin.

<ion-list no-lines> 
..... 
</ion-list>