Angular Material: Intro to UI Components
Angular Material provides over 30 UI components and services. The framework offers a suite of components and containers: from simple Button components with built-in ink and hover effects, theming, and ARIA support… to more complex container components like mdList and Tabs.
Let’s use some of those components in our SideNav and Content containers. For now we will use hard-coded, HTML markup. This allows us to confirm the UX matches that specified in the design docs before we start working on our application logic.
This course has been created by Thomas Burleson and Aaron Frost.
[00:01] Now, we have our containers' sizing properly. Let's add some content to them.
[00:06] Before we start, I want to point out I added an application style sheet to the page. It contains a few simple styles, like I'm setting the fonts to Roboto. I've added an avatar class to make the images round, a few other small tweaks.
[00:22] With that, I'm going to remove some of the old styling from the first few steps, get rid of those background colors, get rid of this style sheet. We're looking good. I want to get a drop shadow on this sidenav though to make it stand out. I want to show you something from the Angular Material docs, so you go to material.angularjs.org.
[00:46] In the demos, there's something called a Whiteframe, makes it really easy to add a drop shadow onto an element. We're going to go ahead and use the Whiteframe. On the sidenav, we're going to add a class. It's .md-whiteframe-4dp. Our sidenav is looking great at this point.
[01:08] When you look at this, we've got a list of users on the left. We have the content, the details for any selected user from the list over on the right. Let's go and hardcode a few users into our list and then we'll hardcode some content. We're going to start by emptying out the sidenav. We're going to add a list, md-list. We're going to add to it an md-list item.
[01:36] All of the list items, we want them to have a button effect where you click on them, you get a ripple. We're going to make the whole list item an md-button. In the button, on the left we're going to have the person's icon. On the right, we're going to have their name. The first thing we're going to do is md-icon.
[01:54] On the md-icon, we're getting an attribute md-svg-src. We have a couple of SVGs in this project. You can get some for your project, avatar1.svg. Make sure we get the avatar class on it so that it rounds up. Looks good. They're looking great. Let's go and add this person's name, Thomas Burleson. We're going to add another person to this list. This one is for Aaron Frost.
[02:26] We have two items on our list. They've got hover. They've got ink and ripple. It looks really good. Let's go ahead and add some content to the right pane. Empty out our content area. I'm going to go ahead and paste in some content for Thomas, our first user. It's got his icon in there, his name, and his bio.
[02:50] Looking at this rendered view, the layout with hardcoded items now looks really good.