WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

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.

Adding Footer

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 Colors

Yes 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.
Color Class Description Result
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  

Footer Elements

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>