【问题标题】:Ionic Ion-Button icon-onlyIonic Ion-Button icon-only
【发布时间】:2018-03-13 06:35:36
【问题描述】:

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

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

【问题讨论】:

    标签: ionic2 ionic3


    【解决方案1】:

    如果我理解正确,添加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>
    

    【讨论】:

      【解决方案2】:

      对于离子 4:

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

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

      【讨论】:

        【解决方案3】:

        对于 Ionic 4 - &lt;ion-button fill="clear"&gt;

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

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

        【讨论】:

          【解决方案4】:
          ionic 4 :
          
           <ion-button (click)="onClick()" fill="clear">
             <ion-icon slot="icon-only" name="home"></ion-icon>
           </ion-button>
          

          【讨论】:

          • 提交的代码需要说明以获取更多信息。
          • 虽然此代码可以解决问题,including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量,并可能导致更多的赞成票。请记住,您正在为将来的读者回答问题,而不仅仅是现在提问的人。请edit您的答案以添加解释并说明适用的限制和假设。 From Review
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2016-07-09
          • 2023-03-17
          • 2019-06-04
          • 2016-06-07
          • 1970-01-01
          • 1970-01-01
          • 2021-05-18
          相关资源
          最近更新 更多