ionic2如何設置只點擊圖標，進入其它頁面

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> 

不知道如何清潔輪廓和按鍵，只需設置一個圖標，當我點擊圖標然後轉到其他功能或頁面。

UPLOAD：（當我使用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

我不是很確定，如果我理解正確的你，但如果你只想要圖標被呈現爲僅限圖標的屬性是您正在尋找的。所以，試試這個：

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

你可以查找文檔，進一步的細節在這裏： https://ionicframework.com/docs/api/components/button/Button/