ionic tutorial - Ionic Footer - ionic - ionic development - ionic 2 - ionic framework



ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started

What is footer?

  • Footer is a root component of a page that sits at the bottom of the page.
  • Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly.
  • Working with footers is almost the same as working with headers.
 ionic - footer

Adding Footer

  • The main class for Ionic footers is bar (the same as header).
  • When you want to add footer to your screens you need to add bar-footer class to your element after the main bar class.
  • Since we want to use our footer on every screen in the app, we will add it to the body of the index.html file. We will also add title for our footer.
<div class="bar bar-footer">
   <h1 class="title">Wikitechy</h1>
</div>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
  • Above code will produce following screen:
 view of ionic footer
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started

Footer Colors

  • If you want to style your footer you just need to add appropriate color class to it.
  • When you style your elements you need to add your main element class as prefix to your color class.
  • Since we are styling footer bar, the prefix class will be bar and color class that we want to use in this example is assertive (red).
<div class="bar bar-footer bar-assertive">
   <h1 class="title">wikitechy</h1>
</div>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
  • Above code will produce following screen:
 footer color in ionic
  • You can use either of the following nine classes to give a color of your choice to your app footer:
Color Class Description Result
bar-light To be used for white color  
bar-stable To be used for light grey color  
bar-positive To be used for blue color  
bar-calm To be used for light blue color  
bar-balanced To be used for green color  
bar-energized To be used for yellow color  
bar-assertive To be used for red color  
bar-royal To be used for violet color  
bar-dark To be used for black color  
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started

Footer Elements

  • Footers can contain elements inside it. Most of the time you will need to add buttons with icons inside a footer.
  • The first button added will always be in the left corner.
  • The last one will be placed on the right.
  • The buttons in between will be grouped next to the first one on the left side of your footer.
  • In following example you can also notice that we use icon class to add icons on top of the buttons.
<div class="bar bar-footer bar-assertive">
   <button class="button icon ion-navicon"></button>
   <button class="button icon ion-home"></button>
   <button class="button icon ion-star"></button>
   <button class="button icon ion-checkmark-round"></button>
</div>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
  • Above code will produce following screen:
 footer icons in ionic
  • If you want to move your button to the right you can add pull-right class.
<div class="bar bar-footer bar-assertive">
   <button class="button icon ion-navicon pull-right"></button>
</div>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
  • Above code will produce following screen:
 footer menu icon in ionic

Related Searches to Ionic Footer