离子在离子页脚栏中添加两个按钮答案

【问题标题】：ionic add two button in ion-footer-bar离子在离子页脚栏中添加两个按钮
【发布时间】：2017-11-07 04:37:12
【问题描述】：

我想像图片一样在 ion-footer-bar 中添加两个按钮，但我的代码无法正常工作。

<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>

【问题讨论】：

您是否尝试在 html 标签之前添加 ion-content 和 ion-pane？看起来像这样<ion-footer-bar class="bar-positive" padding="false"> <ion-pane> <ion-content> <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-content> <ion-pane> </ion-footer-bar>
是的，我愿意。只有上面的代码是目标
你知道怎么做吗？

标签： ionic-framework ionic

【解决方案1】：

在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>

【讨论】：

在 Ionic 4+ 中，只需将 button no-margin ion-button full large 更改为 ion-button expand="full"...这对我有用。谢谢。

【解决方案2】：

你可以这样试试……希望对你有帮助

    <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>

【讨论】：

我希望页脚像图片一样分成两部分，

【解决方案3】：

这就是我实现它的方式。

  <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;
}

【讨论】：

【解决方案4】：

您可以实现以下代码在页脚中添加两个按钮。
在 ion-content 下面和 ion-pane 内使用这些代码。

 <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>

【讨论】：

我有什么办法可以把它们放在一对一的形式上？

【解决方案5】：

如果有人遇到这个问题。

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

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>标签下方

【讨论】：