İyonik sekmeleri Rozet

Question

Ben sekmelerde benim Simgeleri bir rozet eklemek çalışıyorum. Geçerli sonuç: http://play.ionic.io/app/decfc14cb171

Her birinin, her simgenin sağ üst köşesine nasıl yerleştirileceğini biliyor mu?

kullanmayı denedim, ancak "rozet" özelliği ile istenen etkiyi elde etmek daha kolay olmasına rağmen, diğer yönleriyle daha sorunlu olduğunu kanıtladı. İyon sekmeleri kullanmadan çoğaltmanın bir yolu var mı? o rozetleri için "birinci sınıf" desteği vardır gibi ben İyonik en ion-tabs direktifini kullanarak öneriyorum

Answer 1

bu Bkz

[sadece 1 ioinc için çalışıyor]: http://play.ionic.io/app/52586f24b84d
Sen göreceli pozisyon

.badge-container{ 
     position: relative; 
} 

sahip bir sınıf yapmak Ve <i> etiketine bu şekilde atamanız gerekir, rozet otomatik

ayarlanacaktır aynı

<i class="icon ion-home badge-container"><span class="badge badge-assertive">3</span></i> 

diğer sekme için gider

<i class="icon ion-ios-paper badge-container"><span class="badge badge-assertive">5</span></i> 

Artık rozetin yayılma açıklığını da vererek rozetin diğer konumunu da değiştirebilirsiniz.

diyor

<ion-tabs> 
     <ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab> 
     <ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger"></ion-tab> 
     <ion-tab tabIcon="musical-notes" [root]="tabThree"></ion-tab> 
    </ion-tabs> 

"tehlike" dir: Bu gibi tabBadget ve tabBadgetStyle sekmesi kodunda niteliklerini kullanarak

: en son İyonik doc olarak

Answer 2

. İyon-tab öğesinin bir "rozeti" özelliği vardır, bu da bir simgeye metin (bir numaranızda) eklemeyi gerçekten kolaylaştırır.

Burada eylem bunun bir demo yazdık:

<ion-tabs class="tabs-icon-top tabs-striped"> 

<ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="3" badge style="badge-assertive"> 
    <ion-nav-view name="home-tab"></ion-nav-view> 
</ion-tab> 

<ion-tab title="About" icon=" ion-ios-paper" href="#/tab/about" badge="5" badge-style="badge-assertive"> 
    <ion-nav-view name="about-tab"></ion-nav-view> 
</ion-tab> 

</ion-tabs> 

Ve sonuç şöyle:

http://play.ionic.io/app/c6e96276e8fd

etiket eklemek için kod burada

Answer 3

Bunu yapmanın farklı bir yol görünür Tema içinde tanımladığınız renk ...

2017'de cevap bulmak için gelenlere yardım etmesini umuyorum!