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 - JavaScript Tutorial
From the course: Building Native Mobile Apps with NativeScript and Angular 2
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…
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
-
-
-
-
-
-
NativeScript widgets3m 38s
-
Details component3m 57s
-
Segmented bar5m 35s
-
Scroll view2m 40s
-
Layouts2m 7s
-
Layout example3m 11s
-
Containers7m 34s
-
Side drawer setup2m 32s
-
Style overrides2m 44s
-
Dynamic styling4m 45s
-
Styling main content5m 49s
-
Themes5m 40s
-
Images5m 14s
-
File system images4m 32s
-
Base64 images2m 29s
-
Gestures2m 45s
-
Animating button state3m 2s
-
Login animation setup3m 48s
-
Declarative animation4m 58s
-
Imperative animation9m 45s
-
-
-
-