CODEWITHSUNDEEP
htmlcssangularjsionic2hybrid-mobile-app
hybrid Dev
hybrid Dev

Reputation: 529

How to use ion view in ionic 2

Initially i have used in ionic 1 to use the footer after the <ion-content> and befoew .But in new ionic 2 i dont see any <ion-view> is availble.

Because my requirement is after <ion-content> i need to have some two button at bottom of screen. It might be a fotter. So how can i use thos below ionic 1 code to make the footer button in ionic 2 ??

 <div class="bar bar-footer bar-clear footer-button btnpadding" style="margin-bottom: 6px;padding-right: 6px; height: 8%;padding-top: 3px;">

               <div class="button-bar font-color">
                  <button class="button button-outline" style="font-size: 14px;font-weight: bold;border: none;color: #696969;background-color: #fff"  ng-click="LoginButtontap()">LOG IN</button>
                  <button class="button button-dark button-outline" style="margin-bottom: 5px;
                      margin-right: 5px;font-size: 14px;font-weight: bold;border: none;color: #fff">SIGN UP</button> 
              </div> 

          </div>

Upvotes: 1

Views: 2886

Answers (1)

Andrea Rega
Andrea Rega

Reputation: 371

In Ionic 2 the basic page template follow this structure:

<ion-header>
  <!-- PAGE HEADER CODE HERE -->
</ion-header>

<ion-content>
  <!-- PAGE CONTENT CODE HERE -->
</ion-content>

<ion-footer>
  <!-- FOOTER CODE HERE -->
   <ion-button outline style="font-size: 14px;font-weight: bold;border: none;color: #696969;background-color: #fff"  (click)="LoginButtontap()">LOG IN</ion-button>
   <ion-button outline color="dark" style="margin-bottom: 5px;
                      margin-right: 5px;font-size: 14px;font-weight: bold;border: none;color: #fff">SIGN UP</ion-button> 
</ion-footer>

so all you have to do is to put your buttons inside the <ion-footer> element. See also the official docs

Upvotes: 2

Related Questions