Select/Dropdown

3 minutes
Share the link to this page
Copied
  Completed
The ion-select component is similar to an HTML element, however, Ionic’s select component makes it easier for users to sort through and select the preferred option. When users tap the select component, a dialog will appear with all of the options in a large, easy to select list.

Transcript

Hello, in this ionic programming video, we are going to look at the Select CSS component. Just based on that word select, you might not know what it is, it's basically a drop down. So we're going to look at how to do a drop down really, really simple. We're going to go into put it within a list. Actually, no, we're not gonna put the drop down itself because lists are really easy to use. And if you want multiple drop downs, you can just add it within a list.

So what you want to do is just add a label, label. And now this needs to have a class of item item, input item, select and then inside here, put a div with a class of input label. So this Just some text to tell you that what the drop down is for so I'm just gonna put a comma. And now we put select the drop down itself. And inside here, we put option for the red. It's gonna keep this simple.

Green, Blue, save that, build our project. Run it in the simulator. And here we go. We have a drop down there. So if we click color, it doesn't do anything because that's just a label but it does pop this up is the same as before with to click on here, depending on the source device that you run it, the actual drop down will look different. And that's just because our web is iOS Android.

On Friday on web, it actually looks more like a drop down. So again, it depends on the device you're running, which is fantastic. So it actually matches the user experience that the user is expecting from their device. You don't have to code it manually and say, for iOS, make it look like this or use this component. And then I'm going to use this and make it look like this, it will just look the way he should do for that platform. So if I click done, it selects green.

There is nothing more to it. So one thing I just want to show you, if you do want a list of select drop downs, then just put this within a list. And each one of these would be the actual item itself bought from that. That's it. Select drop downs. If you have any questions, feel free to post them on our education platform sonar learning.co.uk.

There'll be a link in the description. Alongside that there'll be a link to the source code from this video and the source code for every other video in this series. If you liked the video, please give the thumbs up hit the subscribe button and leave us a comment. And as usual, thanks for watching, and I hope you have a great day.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.