ionic tutorial - javascript footer | Ionic - Javascript Footer - ionic - ionic development - ionic 2 - ionic framework
What is JavaScript Footer in Ionic Framework?
- This directive will add footer bar at the bottom of the screen.
- Ionic footer can be added by applying ion-footer-bar class. Working with it is the same as working with header.
- We can add title and place it left, center or right by using align-title attribute, and with prefix bar we can Ionic colors.
- Let's create red colored footer with the title in the middle.
<ion-footer-bar align-title="center" class="bar-assertive">
<h1 class="title">Wikitechy Footer</h1>
</ion-footer-bar>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Adding Elements:
- We can add buttons icons or other elements to ion-footer-bar and their styling will be applied.
- Let's add button and Icon to our footer.
<ion-footer-bar class="bar-assertive">
<div class="buttons">
<button class="button">Button</button>
</div>
<h1 class="title">Footer</h1>
<div class="buttons">
<button class="button icon ion-home"></button>
</div>
</ion-footer-bar>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Adding Sub Footer:
- We showed you how to use sub header. The same way can be created sub footer. It will be located above the footer bar.
- All we need to do is add bar-subfooter class to our ion-footer-bar element.
- In example that follows we will add sub-footer above the footer bar 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">
<div class="buttons">
<button class="button">Button</button>
</div>
<h1 class="title">Footer</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button icon ion-home"></button>
</div>
</ion-footer-bar>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
