web-dev-qa-db-ja.com

Ionicツールバー/イオンボタンの外側にある4つの丸いアイコンのみのボタン

イオンボタンの外にアイコンのみの円形の明確なボタンを作成するにはどうすればよいですか？ 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
3
allinonemovie

FabButtonは機能します...しかし、ここでは、ionicコンポーネントを使用して、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>

enter image description here

1
Aaron Saunders

なぜ使用しないのですか？

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

または

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

ここでは fabボタン が必要です

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

あなたはこれを試すことができ、それがあなたの問題を解決します。

        <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>
0
Muhammad Ayyaz