Badges Ionic – ¿Qué son? Con ejemplos claros y sencillos

Badges Ionic – ¿Qué son? Con ejemplos claros y sencillos
5 (100%) 1 vote

En este artículo que os traigo hoy vamos a ver de que son los Badges (ionic badge), o mejor dicho, esos items “adicionales” que les podemos poner a las listas o o botones en manera de información adicional. Es un componente muy intenresante por dos motivos, la jugabilidad que da y lo facil que es programarlo.

badges-ionic
En esta imagen, los badges son los círculos que puedes ver al lado de los iconos.

Eyyy!! Bienvenido guapa lectora y majo lector. ¿Qué tal va pasando el viernes? Antes de continuar me gustaría darte las gracias, y la bienvenida si eres nuevo, por acceder de nuevo al curso. La verdad que estoy super contento por como va reaccionando la gente que pasa por aquí. Ya me entenderéis por qué un poco más adelante en el tiempo, estoy preparando algo bastante especial para todos. Veréis que interesante.

Basta de presentaciones y comencemos con la chica, aunque este artículo no dará para mucho.

Que es un Badge en Ionic

Bien, pues esta es una respuesta que ha estado delante de tí en muchas de las aplicaciones que usas de manera cotidiana. Por regla general, suelen ser los iconos que puedes ver en las listas al principio de una de los componentes listados. O los like que recibe una publicación de una red social, etc… digamos que tienen muchos usos.

Otro ejemplo podría ser, aunque no es concretamente eso, es solo para plasmar la idea, el círculo que le aparece a WhatsApp de cuantos mensajes tenemos. ¿Entiendes? Pero no te líes y continua leyendo.

Si lo transportaramos a HTML normal podriamos decir que se trara de un “span” con el contenido que nosotros queramos. Una etiqueta multiproposito 🙂

¿Cómo se usa un Badge?

Como lo que nos gusta a los desarrolladores es ver ejemplos de código vamos a comenzar con esto.

 

<ion-item>
  <ion-icon name="logo-twitter" item-start></ion-icon>
    Followers
  <ion-badge item-end>260k</ion-badge> <--! Esta es la línea importante -->
</ion-item>

Si usaramos el código que acabamos de ver pintaríamos que tenemos 260k de seguidores en Twitter como se ve en la siguiente imagen:

¿Véis? Hemos pintado el logo con el “ion-icon” asignandone la propiedad “item-star” dentro de nuestro “ion-item”. Pero esto ya lo sabiamos, lo que no nos quedaba claro del todo, que seguro que por eso estás aquí, era como podíamos pintar el 260K en pantalla.

Pues para eso hemos utilizado el componente del que estamos hablando, el Badged. Si revisas el código seguro que lo pillas enseguida. Es más, si le asignamos la propiedad “item-end” como está en el ejemplo, tendremos nuestro objetivo cumplido.

Pues no podemos dar mas de si con este componente, como comenté al principio, es algo sencillo, multiproposito y versatil, pero solo es eso. No tiene nada más por debajo que podamos usar con otro fin, más que informar. Ahora queda a tu disposición para que hagas con el lo que veas conveniente.

Solo comentar, que si estás interesado en formar parte del círculo, puede pasarte por este enlace. El círculo es una comunidad que estoy montando alrededor de esta gran disciplina. Toda la información la tienes allí, espero verte dentro.

El regalito final, como siempre:

 

Pues con esto me despido hoy compañero, un saludo y nos vemos en el siguiente capítulo.

Comparte esto en: