toolbar/ion-buttons 之外的 Ionic 4 圆形图标唯一按钮

Question

如何在 ion 按钮之外创建一个圆形、清晰、仅包含图标的按钮？当您在 ion-buttons 内使用纯图标按钮（例如，清晰和圆形）时，我想要一个具有您获得的样式的按钮。到目前为止我的代码：

    <ion-button icon-only shape="round" color="white" fill="clear">
        <ion-icon slot="icon-only" name="close"></ion-icon>
    </ion-button>

生成的按钮不是圆形的，它只是一个带圆角的矩形按钮。

ionic 4 文档没有提到如何操作。

Answer 1

这里需要fab button

<ion-fab vertical="center" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

Answer 2

FabButton 可以工作...但这是我在使用离子组件的 reactjs 应用程序中的做法，只需使用 angular 版本，您应该会得到相同的结果

<IonCard>
  <IonToolbar>
    <IonTitle>Test</IonTitle>
    <IonButtons slot="end">
      <IonButton
        style={{
          backgroundColor: "red",
          borderRadius: "100%",
          color: "white",
          width: 32
        }}
      >
        <IonIcon icon={close}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
  <IonCardContent>
    This is some text that is the content of the card with the close
    button below
  </IonCardContent>
</IonCard>

Answer 3

为什么不用？

<ion-icon slot="icon-only" name="close-circle"></ion-icon>

或

<ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>

Answer 4

你可以试试这个，它会解决你的问题。

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

Answer 5

你可以使用离子 css 属性 --border-radius 所以

<ion-button id="closeBtn"><ion-icon name="close"></ion-icon></ion-button>

并在 css

#closeBtn {
  --border-radius: 100%;
}

Answer 6

您可以使用 ion-fat-button 来实现：

<ion-fab-button (click)="addPhotoToGallery()" color="light">
     <ion-icon name="camera-outline" color="primary"></ion-icon>
</ion-fab-button>

toolbar/ion-buttons 之外的 Ionic 4 圆形图标唯一按钮

Ionic 4 round icon only button outside of toolbar/ion-buttons

typescript

ionic-framework

angular

ionic4