From the course: Building a Mobile App with AngularJS 1 and Ionic
Unlock this course with a free trial
Join today to access over 22,400 courses taught by industry experts.
Creating cards and inset lists - Angular Tutorial
From the course: Building a Mobile App with AngularJS 1 and Ionic
Creating cards and inset lists
- Ionic has a couple of design elements for mobile applications that are called cards or inset lists. They are really just lists in disguise with a few classes added to them. But they have a slightly different look and feel so let's take a look at what it would take to add those into our application. I'm gonna go ahead and get rid of everything inside ion content so that I can start from scratch. And what I'm gonna do is just go ahead and create a div with a class of list and also list inset. And then inside that I'm gonna create another div with a class of item just like we did for lists, and just put something in there. So, some Lorem ipsum text. And if I save that, you can see that inset lists are just like lists but they have a little bit of padding around them as well as a border. Now, cards are exactly like inset lists so if you modify this div right here to just say card, you're gonna get the same thing except that it has a little bit of a drop shadow. Since inset lists do not…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Understanding basic Ionic CSS components7m 37s
-
Using Ionic buttons5m 14s
-
Adding Ionicons to a layout8m 42s
-
Working with tabs10m 3s
-
Using the list styles12m 30s
-
Creating cards and inset lists4m 46s
-
Creating basic form elements5m 1s
-
Using other form types7m 35s
-
Using special form elements5m 16s
-
-
-
-