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> |
If you run the above example it will produce the following output-
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> |
If you run the above example it will produce the following output-
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> </div> |
If you run the above example it will produce the following output-
