Friday, 24 July 2015

Include menu-bar and back-button on each page in ionic

Hello,

I want to include menu-bar on each and every page in my ionic project, so i include following lines of code in my html page :-

Currently my about.html is look like:-

<ion-view view-title="About Us">
    <ion-nav-bar align-title="center" class="bar-positive header-size">
   
        <ion-nav-back-button class="button-icon icon ion-chevron-left">
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-content class='container-about' scroll="false">
        <div class="text-block">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="text-block">
            It is a long established fact that a reader will be distracted by the readable content of a page when
            looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
            of letters, as opposed to using.
        </div>
   
    </ion-content>
</ion-view>


After including the code for menu-bar and back-button on a page in ionic in about.html:-


<ion-view view-title="About Us" hide-back-button="false">
    <ion-nav-bar align-title="center" class="bar-positive header-size">
     <ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>
        <ion-nav-back-button class="button-icon icon ion-chevron-left">
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-content class='container-about' scroll="false">
        <div class="text-block">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="text-block">
            It is a long established fact that a reader will be distracted by the readable content of a page when
            looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
            of letters, as opposed to using.
        </div>
   
    </ion-content>
</ion-view>
   

No comments:

Post a Comment