Compose Inline Elements with Ionic 4 Badge Component
Learn how to create and use the Ionic Badge component in your Ionic 4 application.
Instructor: [00:00] Ionic has a badge component that we can apply to our application. The component is simply ion-badge. This component is an inline element, meaning that we can compose it within other components.
[00:10] For example, we can add a badge component to our tab bar. Here's a default tab template. This is the base HTML that defines the three tab buttons. We'll add an ion-badge component within the ion-tab button component.
[00:25] We can set the color attribute to one of the predefined values, say secondary. Since I have ionic serve already running, once I save, my application will automatically recompile and reload. There. Now you can see the badge applied right within our tabs content.
[00:44] Ion-badges can also be used with list items. Switching back to the code and to the template for tab one, let's add an ion-badge to one of the list items. Saving. Returning back to our browser, we can now see the badge being shown.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!