angular - 工具栏/离子按钮外的 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 文档没有提到如何做到这一点。

标签： angulartypescriptionic-frameworkionic4

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>