Ionic fab 按钮在 App 中未正确显示答案

【问题标题】：Ionic fab button is not displaying properly in AppIonic fab 按钮在 App 中未正确显示
【发布时间】：2016-04-14 07:11:54
【问题描述】：

我正在尝试在我的应用主页中包含 fab-buttons (FAB button in the link)。但它只显示普通按钮方形按钮。请帮忙鉴定一下。

我的 HTML；

<ion-content>
       <a ng-repeat="area in areaArray | orderBy: 'name'" class="item item-thumbnail-left" href="#">
            <img ng-src={{area["image"]}} ui-sref="tabs.projects({area:area['name']})">
            <h2>{{ area["name"]}}</h2>
      <button class="button button-fab-center button-balanced" ui-sref="tabs.projects({area:area['name'], Project_Status:'Green'})">
                     {{ area["active"]}}</i>
         </button>
         <button class="button button-fab-center button-assertive" ui-sref="tabs.projects({area:area['name'], Project_Status:'Red'})">
                      {{ area["alert"]}}</i>
          </button>
          <button class="button button-fab-center button-energized" ui-sref="tabs.projects({area:area['name'], Project_Status:'Amber'})">
                     {{ area["Amber"]}}</i>
         </button>
     </a>
</ion-content>

这是我的输出：

【问题讨论】：

标签： javascript angularjs html ionic-framework

【解决方案1】：

我有同样的问题，但很容易解决，别担心:)

你只需要这个有一个 FAB 按钮

<ion-fab right bottom>
  <button ion-fab mini><ion-icon name="add"></ion-icon></button>
</ion-fab>

重要提示您必须将 ionic 版本至少升级到 2.0.0-rc0，然后您会看到漂亮的 FAB 按钮 :)

文档here

【讨论】：

【解决方案2】：

<ion-fab slot="fixed">
    <ion-fab-button>
      <ion-icon name="person"></ion-icon>
    </ion-fab-button>
</ion-fab>

在官方文档中找到这个。试试这个fab 查看更多链接

【讨论】：