Ionic 4 圆形图标按钮位于工具栏/离子按钮之外

Question

如何在离子按钮之外创建一个圆形、清晰、仅图标的按钮？我想要一个具有您在使用内部仅图标按钮时所获得的样式的按钮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

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

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