web-dev-qa-db-ja.com

Ionicタブバッジ

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

各アイコンの右上隅にそれらを配置する方法を誰かが知っていますか？

使用してみましたが、「バッジ」属性を使用すると目的の効果を得るのが簡単でしたが、他の点では問題が多いことがわかりました。イオンタブを使わずにそれを複製する方法はありますか？

tabsiconsionic-frameworkionicbadge
12
galgo

[ioinc 1でのみ機能します]

これを見てください： 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>

これで、バッジにまたがるマージンなどを与えることによって、バッジのさらなる位置を変更できます。

3
Mudasser Ajaz

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>

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

Screenshot of ion-tabs with badges

8
Ben Smith

最新のIonic docでは、これを行う別の方法が表示されています。

次のように、タブコードでtabBadgetおよびtabBadgetStyle属性を使用します。

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

ここで「危険」とは、テーマで定義した色です...

2017年に新しい人が答えを見つけるのに役立つことを願っています！

3
Ari Waisberg