如何在离子2

时间:2017-04-28 13:05:29

标签: html css angularjs ionic2 hybrid-mobile-app

最初我使用离子1在<ion-content>之后使用页脚。但是在新离子2中,我看不到任何<ion-view>是可用的。

因为我的要求是在<ion-content>之后我需要在屏幕底部有两个按钮。它可能是一个人。那么如何在离子1代码下面使用thos来制作离子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>

1 个答案:

答案 0 :(得分:2)

在Ionic 2中,基本页面模板遵循以下结构:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

所以你要做的就是把你的按钮放在<ion-footer>元素中。另请参阅official docs