Ionic - Footer
Ionic - Footer : Ionic footer is placed at all-time low of the app screen. operating with footers is sort of identical as operating with headers.
The main category for Ionic footers is bar (the same as header). once you wish to feature footer to your screens,
You would like to feature bar-footer category to your component once the most bar category.
You can add footer on each screen within the app, we'll add it to the body of the index.html file. we'll conjointly add title for our footer.
<div class = "bar bar-footer"> <h1 class = "title">Footer</h1> </div>
Footer ColorsYes you'll add type of footer once you vogue your parts, you would like to feature your main part category as a prefix to your color category.
<div class = "bar bar-footer bar-assertive"> <h1 class = "title">Footer</h1> </div>The above code will produce the following screen there are following nine classes to give a color of your choice to your app footer.
|bar-light||To be used for white color|
|bar-stable||To be used for light grey color|
|bar-positive||To be used for blue color|
|bar-calm||To be used for light blue color|
|bar-balanced||To be used for green color|
|bar-energized||To be used for yellow color|
|bar-assertive||To be used for red color|
|bar-royal||To be used for violet color|
|bar-dark||To be used for black color|
The first button extra can continuously be within the left corner. The last one are placed on the proper.The buttons in between are classified next to the primary one on the left facet of your footer. In following example, you'll additionally notice that we tend to use the icon category to feature icons on high of the buttons.
<div class = "bar bar-footer bar-assertive"> <button class = "button icon ion-navicon"></button> <button class = "button icon ion-home"></button> <button class = "button icon ion-star"></button> <button class = "button icon ion-checkmark-round"></button> </div>the above code will produce the following screen
<div class = "bar bar-footer bar-assertive"> <button class = "button icon ion-navicon pull-right"></button> </div>