IONIC Section 4 - 4.8 Component Categories

Click here for more videos available on our youtube channel !

Hello everyone, now to find a solution to the problem of our components which sometimes do not have the right width for different screen sizes, it is important to understand that Ionic contains 3 different component types. It's an official term, but I think it will help you if you think to these components in these explanatory terms. First of all, we have components that help us with the data output the "output", we have components that help us with the layout the "layout", the organization and classification of the components the "input", and we have components that help us to obtain user inputs. Output components are things like "ion-img, ion-badge, ion-label, ion-title…”, components that mainly display elements. Obviously in this list, there are things like “ion-alert” where the user can also press a button and interact with it. Of course this component does both, but in general, these components are mainly intended to display something on the screen that we want to display to the user. Layout components themselves are not directly visible, but their effect is visible because they essentially allow us to structure the content, for example “ion-grid” which we have not used yet, but we will use for example, “ion-list, ion-tabs”. So basically those components which sometimes also have their visible parts like "ion-card", but which are also important for group items, order the items in a certain way. And finally the input components such as “ion-button, ion-input, ion-textarea”, so that the user can interact with all these components, type something, click something, press a button. So these are 3 important categories that we looked at from the items in each of these categories. Now, since we have a too large component, we want to reduce the size and we will surely need "ion-grid". I'll give you an appointment for the rest in the next video.