web-dev-qa-db-ja.com

IONIC 4のラウンドcssを変更

次のような丸い形のボタンがあります。

<ion-button expand="full" class="shadow-red" shape="round">Signup with</ion-button>

クラスshadow-redは次のとおりです。

.shadow-red{
    box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
    border-radius: 5px;
}

そして結果は：

enter image description here

だから私は丸い形を変更するために多くの異なる方法を試しましたが、それはCSSクラスではないので、次のことをしてもうまくいきませんでした。

.round{
  border-radius:5px!important;
}

追加してみましたborder-radius:5px!important;からion-buttonクラス、button、.btn、および他の多くの組み合わせですが、どれも機能しませんでした。

また、次の行をvariables.cssに追加しようとしましたが、どれも機能しませんでした。

--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....
ionic-frameworkionic4
9
Programmer Man

Shape属性を使用しないでください。ボタンの外観を希望どおりに変更できます。変更する1つのことは、expand属性です。これをfullに設定すると、左右の境界線が削除されます（ドキュメントを参照）。また、border-radiusを設定または変更することはできません。これをblockに設定しても、全幅ボタンが残ります。

<ion-button expand="block" class="shadow-red">Signup with</ion-button>

Ionic 4 docs の説明に従って、次のCSSカスタムプロパティを使用します。

.shadow-red{
    --border-radius: 5px;
    --box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
}

結果：

enter image description here

10
Tomas Vancoillie