Ionic Footer


Ionic Footer : Footers are placed at the bottom of the screen which contains different types of element. You can use color options same as header. Class bar-footer is used to create footer in ionic. You can add links and buttons in footer as per your need. We are going to explain the footer functionality with example and demo.


Ionic Footer

Add the following css to add footer in your App-

Ionic Footer

<div class="bar bar-footer bar-light">
  <div class="title">My Footer</div>
</div>

Try it »

If you run the above example it will produce the following output-

Ionic Footer Example

Ionic Footer Colors

Here are ionic color options available-

No Class Color name Color
1 bar-light White
2 bar-stable Light Gray
3 bar-positive Blue
4 bar-calm Light blue
5 bar-balanced Green
6 bar-energized Yellow
7 bar-assertive Red
8 bar-royal Violet
9 bar-dark Black

You can use the above colors in ionic footer.

Footer With Link

You can use icons, buttons and links in footer to perform actions.

Ionic footer Link Example

<div class="bar bar-footer bar-light">
 <button class="button button-clear"><< Left</button>
  <div class="title">My News</div>
  <button class="button button-clear">Right >></button>
</div>

Try it »

If you run the above example it will produce the following output-

IOnic's Foooter Example

Footer With Icon

You can use icons in footer to perform actions.

Ionic Footer Icons

<div class="bar bar-footer bar-light">
<button class="button icon icon-left ion-home">Home</button>
<button class="button icon ion-gear-a"></button>
<a class="button button-icon icon ion-settings"></a>
</div>

Try it »

If you run the above example it will produce the following output-

Ionic's Footer Example Demo


Advertisements

Add Comment

📖 Read More