Overview of Ionic UI components - Ionic Tutorial

- [Instructor] In this video, we are going to look at some of the components that Ionic allows you to use to create really great engaging mobile applications. So I'm here over our the Ionic Framework documentation page and we can go ahead and look at some of the components. The very first one we're going Now this is a component that we are going to be using at some point in this course. The Ionic documentation page should be your bread and butter when you need to find components or features that you want to use. It has a little preview on the right-hand side that allow you to toggle between iOS mode and material design mode for Android. So if for example, if you go on iOS mode and we click show action sheet, we can scroll down and we can see Now if you are an iOS user, to you as you would have already used it in a lot of your iOS applications. We can close the app and we can go and have a look at it, on the material design side of things. we are shown an Android equivalent of the action sheet. For Android users, this will be very familiar. The documentation page for the component is also really great as if you scroll all the way down it does show you a sample code, for how to use the particular component you are looking at. for Angular, JavaScript, React and View. As Ionic keeps adding support for more For this course, we are only going to concern ourselves with the Angular bit. The next thing we're going to go and do is to go back and actually see other components as well. One component that we should have a look at, is the alert component. The alert component is a typical alert component that allows you to show prompts on the screen. Here we can see the iOS version of an alert, and we can quickly toggle to see the material design for Android. Now the alert component is pretty useful as you can use it to prompt the user for information, and you can also use it to show a set and type of information on the screen to the user so that the user can either consume that information or react it accordingly. Now we are going to head back to the component screen, and we are going to go and view the card component which is yet another component that we will be using in this course. The card component is a very famous one. It's one I particularly like as it gives a very nice look and feel to your information. Whenever you find yourself needing a list of images or a bunch of bite-sized information that you want to show on the screen, the card is normally a very good candidate. Now let's have a look at the preview of this card, on the material design side of things. We can see that it's not too different but we can see that the corners are slightly arched differently and the shadows and the font sizes are also slightly different. Now let's head back and look at two more components that we want to have a look at. The first amongst the last two that we will be having a look at is the infinite scroll. Now this is a very special component right here. The infinite scroll allows you to show a list of information, but also when your users get to the very end of that particular list, like this, more information automatically comes up. Now the Ionic infinite scroll component allows you to completely control this flow. how close the user will get to the bottom before a refresh is triggered and more information comes through. Let's go back to the components screen This component is called the Ionic refresher component. you to implement the porter refresh functionality, inside of your application. So for example, if I pull down from the bottom and leave it, then we can see more information come up at the top. This is a very common design paradigm that a lot of apps out there like Twitter or Facebook leverage on. It is normally implemented when we want to allow users to pull and refresh to get new information. in a Twitter feed, or on a Facebook wall. You are probably very familiar with this feature on a lot of your mobile applications, but the ion-refresher is what allows you to implement this in your Ionic applications. Let's quickly have a look at the same feature on the Android side of things. So we just try to pull and we have new information. The ion-refresher does have some properties and methods that allow you to control this flow. Let's quickly have a look at some of these. So for example, you can specify what icon you want to show, to pull in order for the refresh to be triggered, while also being able to configure a lot of other features that we're not even going to talk about. Now, these are just some of the very few components we're going to talk about, but the Ionic team has a whole lot of other components coming has a whole lot of other components coming out every single day and even some right out every single day and even some right here on the documentation here on the documentation that we will not have time to go through. that we will not have time to go through. As we go through this course, you are going to see As we go through this course, you are going to see us use some components that we didn't even discuss us use some components that we didn't even discuss in this particular video, in this particular video, but you'll see us implement them to create special features but you'll see us implement them to create special features for our applications throughout this course. for our applications throughout this course. Now we are ready to go ahead Now we are ready to go ahead and start implementing our Ionic application. and start implementing our Ionic application.