离子离子按钮仅限图标

时间:2017-10-02 07:38:31

标签: ionic2 ionic3

我在Ionic2或Ionic中都是新手。我设置了一个新项目,并希望在页面底部设计一个小菜单。我没有在这个项目上做任何其他事情,并试图模仿教程视频的步骤。但是当我在按钮上使用icon-only指令时,按钮的背景只会变小一些。背景并没有消失。

<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <button ion-button icon-only>
      <ion-icon name="home"></ion-icon>
    </button>
    <button ion-button icon-only>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-toolbar>
</ion-footer>

这是我的代码。我希望你能帮助我。

4 个答案:

答案 0 :(得分:10)

如果我理解正确,添加clear属性应该会得到您想要的结果:

<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <button ion-button icon-only clear>
      <ion-icon name="home"></ion-icon>
    </button>
    <button ion-button icon-only clear>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-toolbar>
</ion-footer>

答案 1 :(得分:3)

对于Ionic 4-

您现在可以使用fill属性,例如:

<ion-button (click)="onClick()" fill="clear"> <ion-icon slot="icon-only" name="home"></ion-icon> </ion-button>

答案 2 :(得分:1)

对于Ionic 4:

...
    <ion-button (click)="onClick()">
      <ion-icon slot="icon-only" name="home"></ion-icon>
    </ion-button>
...

您可以转到此链接以获取更多参考文献https://ionicframework.com/docs/api/button

答案 3 :(得分:1)

ionic 4 :

 <ion-button (click)="onClick()" fill="clear">
   <ion-icon slot="icon-only" name="home"></ion-icon>
 </ion-button>