イオニアのタブバッジ

Question

私は自分のアイコンのバッジをタブに追加しようとしています。 現在の結果はhttp://play.ionic.io/app/decfc14cb171

どのアイコンをどのアイコンの右上隅に配置するのですか？

私はを使用しようとしましたが、「バッジ」属性で目的の効果を達成するのは簡単でしたが、他の側面ではさらに問題があることが判明しました。イオンタブを使わずにそれを複製する方法はありますか？

Answer 1

はこれを参照してください

[のみ1 ioincのために働く]：http://play.ionic.io/app/52586f24b84d
をあなたは相対的な位置

.badge-container{ 
     position: relative; 
} 

を持つクラスを作成し、<i>タグには、この方法でそれを割り当てる必要があり、バッジが自動的に

調整されます同じ

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

は、他のタブのために行く

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

バッジのスパンに余白などをつけることでバッジの位置を変更することもできます。

それが言う

<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> 

「危険」は次のとおりです。このように、tabBadgetとtabBadgetStyleはタブコードの属性を使用して

：最新のイオンドキュメントで

Answer 2

Ionicのion-tabs指示文を使用することをおすすめします。これはバッジの「ファーストクラス」をサポートしているためです。 ion-tab要素には「バッジ」属性があり、アイコンにテキスト（あなたの場合は数字）を簡単に追加できます。

私はここにアクションで、それのデモを書いた：

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

タグを追加するコードはここにある：

<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> 

そして結果は次のようになります。

Answer 3

は、これを行うための別の方法を表示されますあなたがテーマで定義する色...

新しいものが2017年に答えを見つけるのを助けてくれることを願っています！