ionic2如何设置“仅单击图标”和“转到其他页面”

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

登录方式：

不知道如何清理大纲和按钮，只需设置一个图标，当我点击图标，然后转到其他功能或页面

上传：（仅当我使用

图标时

）

删除样式后

---

我不太确定我是否正确理解了您的意思，但如果您只想呈现图标，那么您需要的就是“仅图标”属性。所以试试这个：

---

我不太确定我是否正确理解了您的意思，但如果您只想呈现图标，那么您需要的就是“仅图标”属性。所以试试这个：

---

如果您要添加

outline

属性，则只会在按钮上添加边框。如果只需要图标，则需要清除

属性

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


登录方式：

这样会更干净，会有更好的展示，但这取决于你，这只是一个建议

希望这对您有所帮助。如果您正在添加
outline
属性，则只会在按钮上添加边框。如果只需要图标，则需要清除
属性

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


登录方式：

这样会更干净，会有更好的展示，但这取决于你，这只是一个建议

希望这有帮助
我的意思是只有图标，没有圆线，我可以点击图标。我现在编辑了答案，请使用与示例中完全相同的代码，并告诉我它是否有效。不过你可以保留回合属性。我试过这个ald。。不为我工作。。我只想要图标。当我使用代码显示时，我上传了。你使用了没有任何更改的图标，还是仍然保留“style=40%”属性？style属性也会更改我的输出。如果你有，请准确张贴你用图片尝试的代码。仍然无法。。我上传的新图片有问题，我的意思是只有图标，没有圆线，我可以点击图标。我现在编辑了答案，请使用与示例中完全相同的代码，并告诉我它是否有效。不过你可以保留回合属性。我试过这个ald。。不为我工作。。我只想要图标。当我使用代码显示时，我上传了。你使用了没有任何更改的图标，还是仍然保留“style=40%”属性？style属性也会更改我的输出。如果你有，请准确张贴你用图片尝试的代码。仍然无法。。我上传了问题+1中的新图像，因为您不仅解决了OP的问题，还建议如何使用爱奥尼亚的网格避免内联样式：）+1因为您不仅解决了OP的问题，还建议如何使用爱奥尼亚的网格避免内联样式：）