item - ionic tabs

Insignia de fichas iónicas

Question

Estoy tratando de agregar una insignia en mis íconos en las pestañas. El resultado actual es: http://play.ionic.io/app/decfc14cb171

¿Alguien sabe cómo ponerlos en la esquina superior derecha de cada icono?

Intenté usar pero resultó ser más problemático en otros aspectos, aunque con el atributo "insignia" fue más fácil lograr el efecto deseado. ¿Hay alguna forma de replicarlo sin usar pestañas de iones?

Answer 1

Ver esto: http://play.ionic.io/app/52586f24b84d
Necesitas hacer una clase con posición relativa

.badge-container{
      position: relative;
}

Y asignarlo a la etiqueta <i> esta manera, la insignia se ajustará automáticamente

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

Lo mismo ocurre con otra pestaña

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

Ahora puede cambiar la posición de la insignia también al otorgarle un margen, etc., para que se extienda con la insignia.

Answer 2

Aconsejo usar la directiva Ionic''s ion-tabs , ya que se ha escrito para admitir insignias. El elemento ion-tab tiene un atributo "badge" que hace que sea realmente fácil agregar texto (en tu caso, un número) a un ícono.

He escrito una demostración de esto en acción aquí:

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

El código para agregar las etiquetas está aquí:

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

Y el resultado se ve así: