仅工具栏外的离子4圆形图标按钮/离子按钮 [英] Ionic 4 round icon only button outside of toolbar/ion-buttons

问题描述

如何在离子按钮之外创建一个圆形、清晰、仅限图标的按钮？我想要一个你在使用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文档未提及如何执行此操作。

推荐答案

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>

这篇关于仅工具栏外的离子4圆形图标按钮/离子按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！