IONIC Section 4 - 4.7 More basic components

Click here for more videos available on our youtube channel !

hello to all, we continue in our structure. I recall here our code, on our previous video. And now we will go back to the documentation because there is a tab with input so here it is with “ion-input” for insertion, and if we look at the usage example we have this one with "floating" in position, which will allow to float when you click. So we can copy it and we will paste it in order to add it to our “ion-content” and this label we will put as an indication "reasons for expenses" and in our "ion-input" we will define an attribute of type text, in order to be able to write text inside. And if I look at the change made by reloading our application, we can see our input displayed where I can enter a reason for spending. That's good, now we can also add another entry below this where I will say the amount of the expense. So we copy and paste and indicate the amount of the expense and we change the type to "Number", because users should only be able to enter numbers. So we save and we go back on our app reloaded and we see this second entry below the first. It's very good, now if we want wrapped all this let's say in a kind of box instead of being arranged across the width of the screen, we can see by inspecting the element and by simulating the vision on other devices, so I am on Mac, so it will be on the range of the same manufacturer, but if you check you can see that it is on all other devices, we get this same display width on the screen. It's not a problem, we can put it in a so-called "card" and we will directly insert this "ion-card" between our content, don't forget to add the "ion-card-content" which will manage the "content" so the content of our application Ionic so that they are nicely wrapped together. Once that's done I'm also going to add an element just above which is called "ion-card-header" which will manage the content, with an "ion-card-title" inside and add the "New Expenses". Now if we save our application and we check, we get this result. This video is coming to an end, we will meet again for the next video.