Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Page Layout

Ionic Creator has numerous drag-and-drop components that you can use to build your app. In this lesson I’ll show you the components for laying out your app pages.

Related Links

2.2 Page Layout

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 we will use to layout our page. I've often said that Ionic is just like Bootstrap or Foundation for mobile apps. Unlike Cordova, which is just a wrapper to use JavaScript for mobile, Ionic offers all of the element that we need to develop an app. Now you might think this is limiting and will lead to cookie cutter apps that all look the same. Fortunately, these components are fully customizable and the Ionic team suggests that you take advantage of this and customize the elements to suit the style of your app. Now if you log into Creator, go ahead and go back to your project. If you don't have a project, go ahead and create one with the blank option. Once we are in our project dashboard, the first component we will look at is the heading. The heading is used to create a text label, to use this component, all we have to do is drag and drop it on our device. Once we drop the heading on our project, it has two buttons on its border. The left button allows us to duplicate this control. In this way, we can quickly populate our page with the same elements. The right button will delete the element from our page. While the heading is selected the properties will be visible on the right side. The text field is for the text that will appear in the heading. This text can be multi-line and if it is the header will adapt accordingly. In the Size, we can choose Default or H1 through H5 HTML heading tags. Then the weight determines the thickness of the characters. Then the italicized i will let us display our content in italics. The Color will set the color of our text. We can click on the control to display a color picker so that we can choose our color. The Align control will allow us to set the text left, center, right or justified. Next up the paragraph element allows us to add blocks of text to our page. The size is set to the default which is 14 pixels. Again, we have the color and alignment that work the same as the heading. With the paragraph, however, we have the advantage of being able to use markdown in the control. Markdown is a markup language that lets you format your text with simple tags For example, all we have to do is precede Text with one number sign for H1 Text, two number signs for H2, and so on. In addition to the markdown tags we can also use some HTML in markdown. For example, to create our horizontal rule we can use three hyphens, three asterisks or three underscores. For a better understanding of what you can do with markdown, take a look at the documentation. I have included a link with the course notes. Next we have the button and the button-bar, these both have the same properties with the only difference being the button-bar has three buttons instead of one. The first thing we have to determine is what kind of link the button will launch. The first kind of link is another page in our app. First I'm going to add a second page to our app and give it a heading. Once we do that we can link to that page. Then if we preview the app, We can see that it navigates to the second page. The second kind of link is a standard webpage. This way we can navigate from our app to an external site. The final two options are for email and phone. Since this is a mobile app we have the opportunity to use the email and phone dialer app on our device. Incidentally, if we use these links from the preview, the default handlers for these services on our computer will be used. Then we have the text that will appear in our button as well as the styling options for pixel size, text alignment, font weight, and color. Then after that we have styles that apply directly to our button. First the Width determines what the button looks like. The Block button is a standard button. This button has margins and appears centered on our page. In order to create a button without margins, we just change it to Full Width. The Inline button will allow us to create groupings of buttons like the button-bar. Then the Type allows us to select the style of the button that we will use. We can also create Clear and Outline buttons. They are basically the same except the Clear button doesn't have a border around it. Incidentally, you can only see the difference in the Clear and Outline button in the preview. We can also create an Icon Only button that just has an icon as the label. Then we have the Theme that determines the color of our buttons. Then the Size lets us adjust the button size. Then the Radius allows us to set our border radius which allows us to add rounded corners to our buttons. We can set this for our entire button, or just individual corners. As you can see, we have set different values for each side of our button. After that, we have our Classes that will allow us to style our buttons further if we like. Then finally, we have an Icon that we can add to our buttons. Here we also have Position that allows us to set the alignment of our icon on our button. The next component we will look at is the Card, which is actually four different components grouped together. Cards are very useful for displaying information. The top of the card is a list item that has this same linking options as a button. This list item can also be an avatar, icon or thumbnail. We can also turn on Word Wraps so overflow on the line two text will wrap for us. Then the right side will allow us to add an icon to the right side of our heading. The Accessory serves to mute the icon by making it smaller size then grey. Then finally, Swipe buttons allow us to add buttons that will only be visible if we swipe on our element. Now the middle component is an image, while the component after that is a paragraph. Then finally, the bottom is a list item as well. We will talk more about lists in the later video. Also if we select the entire card, we can remove the margins on the sides and make it full width. Next we have the Spacer component that allow us to add space between elements. This makes sure that our elements aren't pressed up against each other. This element only has the height property which, of course, sets the height of our space. Then the final component we will talk about is not really a component at all. The container is a drag and drop area that we can use to hold other components. It is initially set to wrap the other component in a div, but this can be changed to another element of your choosing. This is useful since it allows you to add parent classes to the div that will affect the elements inside. Now that is everything you need to know to use the page layout components. In the next video we will look at elements that allow us to display images and HTML content.

Back to the top