Saltar al contenido

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

Badges Ionic

¿Interesado en conocer cómo se utiliza los Ionic Badges? O, quizás, ya sabes cómo se usan, pero te falta conocer algo sobre ellos para hacerlo funcionar ¿cierto?

Si la respuesta es sí, no eres el primero, ni el último, que pasa por aquí para ver cómo lo puede utilizar en sus aplicaciones. Es más, déjame decirte que hasta yo mismo cuando tengo que utilizarlos tengo que entrar a este artículo para recordarlo.

Por si no me conoces aún, mi nombre es Aitor Sánchez y soy desarrollador de apps desde el 2014 y en este artículo te voy a mostrar cómo, de una manera sencilla y totalmente práctica, puedes incluir este componente en tus aplicaciones.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

Que son las Badges 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 uno 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 continúa leyendo.

Si lo transportarámos a HTML normal podríamos decir que se trata de un «span» con el contenido que nosotros queramos. Una etiqueta multipropósito 🙂

 

¿Cómo se usa un Ionic 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 usáramos el código que acabamos de ver pintaríamos que tenemos 260k de seguidores en Twitter como se ve en la siguiente imagen:

¿Ves? Hemos pintado el logo con el «ion-icon» asignándole la propiedad «item-star» dentro de nuestro «ion-item». Pero esto ya lo sabíamos, 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 ion-badge. 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 más de sí con este componente, como comenté al principio, es algo sencillo, multipropósito y versátil, 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.

Más contenidos del curso:

 

Tutorial en video de Ion Badge:

 

Pues con esto me despido hoy compañero. Recuerda, si te ha gustado/ayudado el artículo, no olvides pasarte por «El Círculo».

Nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!