Question

.html

<ion-footer>
    <h1>登录方式：</h1>
      <ion-list>
        <button style="width:40%" ion-button round outline (click)= "QQLogin()">
          <ion-icon name="minan-qq"></ion-icon>
        </button>
        <button style="width:40%" ion-button round outline (click)= "QQLogin()">
          <ion-icon name="minan-weixin"></ion-icon>
        </button>
        <button style="width:40%" ion-button round outline (click)= "QQLogin()">
          <ion-icon name="minan-weibo"></ion-icon>
        </button>
        <button style="width:40%" ion-button round outline (click)= "QQLogin()">
          <ion-icon name="minan-facebook"></ion-icon>
        </button>
      </ion-list>
    </ion-footer>

不知道如何清洁轮廓和按钮，只需设置图标，当我点击图标然后转到其他功能或页面。

上传:(当我使用icon-only）

时

删除样式

Answer 1

案例是你要添加outline属性，这只会添加按钮的边框。如果您只想要图标，则需要clear属性。

<ion-footer>
  <h1>登录方式：</h1>
    <ion-list>
      <button style="width:40%" ion-button icon-only clear (click)= "QQLogin()">
        <ion-icon name="minan-qq"></ion-icon>
      </button>
      <button style="width:40%" ion-button icon-only clear (click)= "QQLogin()">
        <ion-icon name="minan-weixin"></ion-icon>
      </button>
      <button style="width:40%" ion-button icon-only clear (click)= "QQLogin()">
        <ion-icon name="minan-weibo"></ion-icon>
      </button>
      <button style="width:40%" ion-button icon-only clear (click)= "QQLogin()">
        <ion-icon name="minan-facebook"></ion-icon>
      </button>
    </ion-list>
  </ion-footer>

内联样式也很糟糕，有一种更好的方法来使用网格系统分发按钮

<ion-footer>
  <h1>登录方式：</h1>
    <ion-row>
      <ion-col col-6>
        <button ion-button icon-only clear (click)= "QQLogin()">
          <ion-icon name="minan-qq"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-6>
        <button ion-button icon-only clear (click)= "QQLogin()">
          <ion-icon name="minan-weixin"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-6>
        <button ion-button icon-only clear (click)= "QQLogin()">
          <ion-icon name="minan-weibo"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-6>
        <button ion-button icon-only clear (click)= "QQLogin()">
          <ion-icon name="minan-facebook"></ion-icon>
        </button>
      </ion-col>
    </ion-row>
  </ion-footer>

这种方式更干净，会有更好的演示，但这取决于你，这只是一种消化。

希望这有帮助

Answer 2

我不太确定我是否理解正确，但如果您只想要渲染图标，那么仅图标属性就是您要寻找的。所以试试这个：

＆＃13;

<button ion-button icon-only (click)= "QQLogin()">
          <ion-icon name="minan-facebook"></ion-icon>
</button>

<!-- use this for round icon -->
<button ion-button icon-only round (click)= "QQLogin()">
          <ion-icon name="minan-facebook"></ion-icon>
</button>

＆＃13;

您可以在此处查找文档以获取更多详细信息： https://ionicframework.com/docs/api/components/button/Button/

ionic2如何仅设置点击图标并转到其他页面

2 个答案: