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-

NoClassColor nameColor
1bar-lightWhite
2bar-stableLight Gray
3bar-positiveBlue
4bar-calmLight blue
5bar-balancedGreen
6bar-energizedYellow
7bar-assertiveRed
8bar-royalViolet
9bar-darkBlack

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


User Ans/Comments

📖 Read More


Advertisements