From the course: Building Native Mobile Apps with NativeScript and Angular 2

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Side drawer setup

Side drawer setup - JavaScript Tutorial

From the course: Building Native Mobile Apps with NativeScript and Angular 2

Start my 1-month free trial

Side drawer setup

- [Instructor] Let's give our drawer a basic background and arrange our menu items using some layouts we've learned about. So in the backlog.component.html file, we'll add a grid layout to arrange our menu elements and define three rows by specifying heights for each row. So for now, let's go ahead and add a grid layout here. We'll give it a class of side-drawer-panel. And we'll define it with three rows. First row's gonna be auto, second row is star, and third row is 100. We'll take a look at the rows later and how much space is allocated for each. Don't forget to close your element. And let's define an inline style here on the component. We're gonna use this class name right here for this side-drawer-panel, I'm gonna copy that and paste that here. And we're just gonna define a background color rule. We're gonna make it gray. Let's save that and take a look at our app. So when we open the menu up, you see the background is gray and we have a logout button there. We can also drag the…

Contents