离子在离子页脚杆中添加两个按钮

时间：2016-01-12 15:04:35

标签： ionic-framework ionic

我想在离子页脚栏中添加两个按钮，如图片，但我的代码无法正常工作。

<ion-footer-bar class="bar-positive" padding="false">
    <h1 class="title col col-50 no-padding remove-filter">
        Button 333333333
    </h1>
    <h1 class="title col col-50 no-padding remove-filter">
        Button 333333333
    </h1>
</ion-footer-bar>

enter image description here

5 个答案:

答案 0 :(得分：8)

在ionic2 +中，你可以这样做...... 

<ion-header>
    <ion-navbar>
        <ion-title>My Page</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
</ion-content>
<ion-footer>
    <ion-row>
        <ion-col no-padding>
            <button no-margin ion-button full large color="primary">Update</button>
        </ion-col>
        <ion-col no-padding>
            <button no-margin ion-button full large color="danger">Cancel</button>
        </ion-col>
    </ion-row>
</ion-footer>

答案 1 :(得分：1)

你可以这样试试......希望它可以帮助

    <ion-footer-bar align-title="left" class="bar-assertive">
        <ion-tabs class="tabs-positive tabs-icon-top">

          <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
            <!-- Tab 1 content -->
          </ion-tab>

          <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
            <!-- Tab 2 content -->
          </ion-tab>

          <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
            <!-- Tab 3 content -->
          </ion-tab>

        </ion-tabs>
</ion-footer-bar>

答案 2 :(得分：0)

这就是我实现它的方式。

  <ion-footer-bar class="bar button-bar-footer" style="height: auto;">
     <div class="button-bar" style="position: absolute;bottom: 0;" >
       <a style="min-width: 50%;border-radius: 0px;" class="button button-dark icon-left ion-close">Cancel</a>
       <a style="min-width: 50%;border-radius: 0px;"  class="button button-balanced icon-left ion-checkmark">Save</a>
    </div>
  </ion-footer-bar>

修改 这在Android设备上运行不正常，因此请删除<ionic-footer>。新代码是

<div id="footer" class="button-bar"  >
  <a style="min-width: 50%;border-radius: 0px;" class="button button-lite icon-left ion-close">Cancel</a>
  <a style="min-width: 50%;border-radius: 0px;"  class="button button-calm icon-left ion-checkmark">Save</a>
</div>

<强> CSS 

/*Footer*/
#footer {
  position : absolute;
  bottom : 0;
  height : 40px;
  margin-top : 40px;
}

2 Buttons ionic footer

答案 3 :(得分：0)

您可以在下面的代码中实现在页脚中添加两个按钮 在离子含量和离子窗格内使用这些代码。 

 <div style="position: absolute; background-color: transparent; bottom: 0px; width: 100%">
      <div class="row">
      <button style="color: black; background-color: wheat;" class="col col-50 button button-block">button 1</button>
      <button style="color: black; background-color: blue;" class="col col-50 button button-block">button 2</button>
      </div>
</div>

答案 4 :(得分：0)

如果有人遇到过这个问题。

在页脚中显示离子的按钮的替代解决方案。

Ionic footbar with two buttons 

<ion-footer-bar class = "bar-assertive">
  <div class = "buttons">
   <button class = "button">Button</button>
  </div>

  <h1 class = "title">Footer</h1>

  <div class = "buttons">
   <button class = "button icon ion-home"></button>
  </div>
</ion-footer-bar>

注意： 以上代码需要低于<ion-content></ion-content>代码

相关问题
最新问题