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.
Images - JavaScript Tutorial
From the course: Building Native Mobile Apps with NativeScript and Angular 2
Images
- [Instructor] We need to add a few images to our app. Not just to make it look prettier, but also to make it communicate certain information. We're going to add a logo to our slide out menu, avatar images for our users, and indicator images to easily identify the type of backlog item. There are several ways to work with images in Nata Script. The most straight forward way is to set the image source to a web URL. Let's take a look at our code. Our app design calls for a logo on the login page. So let's add a logo here. At the very top, I'm gonna remove this label and I'm gonna add a stack layout to contain our logo. Let's put it in row zero. And we'll give it a class of logo container. And inside we're gonna use an image to show our logo. Now the image has a source property and we also sometimes use this stretch property. We'll set that to none for now, I'll go over that shortly. Now for the source I'm gonna just paste in an internet URL for our logo. So this image will only show if…
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
-
-
-
-