在 IONIC 4 中更改回合 css

Question

我有一个圆形的按钮如下：

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

class 暗红色是：

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

结果是：

所以我尝试了很多不同的方法来改变圆形，但由于它不是 css class，因此执行以下操作无效。

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

我尝试将 border-radius:5px!important; 添加到 ion-button class、button、.btn 和许多其他组合，但其中 none 有效.

我还尝试将以下几行添加到 variables.css，其中 none 有效：

--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....

Answer 1

不要使用形状属性，现在您可以根据自己的意愿更改按钮的外观。要更改的一件事是扩展属性。如果将其设置为 full，则会删除左右边框（请参阅文档）。所以你不能设置或改变边界半径。将其设置为 block，您仍然会有一个全角按钮。

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

使用以下 CSS 自定义属性，如 Ionic 4 docs 中所述。

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

结果：

Answer 2

以下代码对我有用。根据您的需要更改高度和宽度值以满足您的要求。

<ion-button slot="end" shape = "round" style="height: 3rem; width : 3rem">
    <ion-icon name="create-outline" slot="icon-only"></ion-icon>
</ion-button>

在 IONIC 4 中更改回合 css

Change Round css in IONIC 4

ionic-framework

ionic4