Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Ionic 2
  • Overview
  • Transcript

2.3 Displaying HTML and Images

In this lesson I'll show you how to make your app more interesting by displaying images and HTML.

2.3 Displaying HTML and Images

Hello everyone, I am Reggie Dawson. Welcome back to the Get Started With Ionic Creator course for Tuts+. In this video, we will look at the elements that let us display HTML and images in our app. The first component we will look at is the HTML component. Now this component will allow us to have full control of the sections HTML in our project. When we add the component to our page, we get an editor that we can use to add HTML. This HTML will be inside of a div, like we added a container to wrap it. We can also pop the editor out, and add some HTML to it. This editor is very useful, and actually closes our tags for us. After you add your HTML, make sure you click on Save. After that, the next component we will look at is the image. We have already seen this one inside of the card component. We can also link to this component using the same methods that we saw with our button. We also have an area where we can upload the image. After that, the styling options allows to adjust the size of the image. We can also click on the Make full width check box to remove the margins from the image. Then the position controls allow us to decide how the image will be aligned. This will only work if the image is scaled down, since otherwise the image will be centered. Then the slider component allows us to set up an image slider. We will be able to scroll among the images hosted by the slider. If we choose Edit Slide, we can select the slide that we wanna edit. Then the blue arrows will allow us to change around the order of the slides. Then after that, we have a background for the slide in case you don't wanna use images and instead want a solid background color. The beauty of the slider is that it functions as a drag and drop container for other elements. Here we have dragged in a header, and as you can see it works fine while it is inside of the slider. We can also turn on padding or vertically align the content in the slides. Then finally, the video component allows us to display a video of our choice. In order to use this, we first have to choose between Vimeo and YouTube. After that it's as simple as providing the video ID and then it can be added to our app. That's all you need to know to display HTML images and videos in your app. In the next video we will learn about form controls.

Back to the top
Continue watching with Elements