Ionic CSS Components
- Ionic - Padding
- Ionic - Icons
- Ionic - Grid
- Ionic - Tabs
- Ionic - Select
- Ionic - Range
- Ionic - Radio Button
- Ionic - Checkbox
- Ionic - Toggle
- Ionic - Forms
- Ionic - Cards
- Ionic - Lists
- Ionic - Buttons
- Ionic - Footer
- Ionic - Header
- Ionic - Content
- Ionic - Colors
Ionic Javascript Components
- Ionic - JS Tabs
- Ionic - JS Slide Box
- Ionic - JS Side Menu
- Ionic - JS Scroll
- Ionic - JS Popup
- Ionic - JS Popover
- Ionic - JS Navigation
- Ionic - JS Modal
- Ionic - JS Loading
- Ionic - JS List
- Ionic - JS Keyboard
- Ionic - JS Footer
- Ionic - JS Header
- Ionic - JS Events
- Ionic - JS Forms
- Ionic - JS Content
- Ionic - JS Backdrop
- Ionic - JS Action Sheet
Ionic Advanced Concepts
- Ionic - Splash Screen
- Ionic - Media
- Ionic - Geolocation
- Ionic - Native Audio
- Ionic - In App Browser
- Ionic - Facebook
- Ionic - Camera
- Ionic - AdMob
- Ionic - Cordova Integration
Ionic Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ionic - Javascript Footer
This directive will add a footer bar at the bottom of the screen.
Using Footer
The Ionic footer can be added by applying an ion-footer-bar class. Working with it is same as working with header. We can add a title and place it on the left, center or right side of the screen by using the apgn-title attribute. With the prefix bar, we can use the Ionic colors. Let us create a red colored footer with the title in the center.
<ion-footer-bar apgn-title = "center" class = "bar-assertive"> <h1 class = "title">Title!</h1> </ion-footer-bar>
The above code will produce the following screen −

Adding Elements
We can add buttons icons or other elements to the ion-footer-bar and their stypng will be appped. Let us add a button and an Icon to our footer.
<ion-footer-bar class = "bar-assertive"> <span class = "buttons"> <button class = "button">Button</button> </span> <h1 class = "title">Footer</h1> <span class = "buttons"> <button class = "button icon ion-home"></button> </span> </ion-footer-bar>
The above code will produce the following screen−

Adding Sub Footer
We showed you how to use a sub header. The same way a sub footer can be created. It will be located above the footer bar. All we need to do is add a bar-subfooter class to our ion-footer-bar element.
In example that follows, we will add the sub-footer above the footer bar, which we previously created.
<ion-footer-bar class = "bar-subfooter bar-positive"> <h1 class = "title">Sub Footer</h1> </ion-footer-bar> <ion-footer-bar class = "bar-assertive"> <span class = "buttons"> <button class = "button">Button</button> </span> <h1 class = "title">Footer</h1> <span class = "buttons" ng-cpck = "doSomething()"> <button class = "button icon ion-home"></button> </span> </ion-footer-bar>
The above code will produce the following screen −
