ionic footer bar


<ion-footer-bar class="bottom-banner bar-positive">
            <h1 class="title">
                   This is the footer of ionic app
            </h1>
</ion-footer-bar>


In the side menu template above code should be use like:

<ion-side-menus expose-aside-when="large" enable-menu-with-back-views="true">
        <ion-pane ion-side-menu-content>
            <ion-nav-bar class="bar-positive nav-title-slide-ios7">
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" toggle="left"></button>
                </ion-nav-buttons>
   
                <ion-nav-back-button class="button-clear">
                    <i class="icon ion-chevron-left"></i>
                </ion-nav-back-button>
   
            </ion-nav-bar>
            <ion-nav-view name="main" animation="slide-left-right">
           </ion-nav-view>
            <ion-footer-bar class="bottom-banner bar-positive">
                <h1 class="title">
                      This is the footer of ionic app
                </h1>
            </ion-footer-bar>
        </ion-pane>

       <ion-side-menu side="left">
            <header class="bar bar-header bar-positive">
             </header>
            <ion-content class="has-header">
       </ion-content>
        </ion-side-menu>
       
    </ion-side-menus>


And don't forget to user attribute "has-footer" in your child templates/views like:

<ion-content class="has-header has-footer">
</ion-content>

1 comment:

  1. It would be great to have a link to run this in the online emulator to see it in action

    ReplyDelete