更改IONIC 4中的圆形css

lhcgjxsq 于 2022-12-16 发布在 Ionic

关注(0)|答案(3)|浏览(142)

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

<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;
}

结果是：

所以我尝试了很多不同的方法来改变圆形，但是因为它不是一个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-framework

来源：https://stackoverflow.com/questions/53683046/change-round-css-in-ionic-4

3条答案

按热度按时间

rhfm7lfc1#

不要使用shape属性，现在你可以根据自己的意愿改变按钮的外观。需要改变的一件事是expand属性。如果你将其设置为 full，你将删除左右边框（参见文档中的）。因此你不能设置或改变border-radius。将其设置为 block，你仍然会得到一个全宽度的按钮。

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

使用Ionic 4文档中描述的以下CSS自定义属性。

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

结果：

赞(0）回复(0）举报 2022-12-16

nvbavucw2#

下面的代码为我工作。根据您的需要更改高度和宽度值，以满足您的要求。

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

赞(0）回复(0）举报 2022-12-16

lsmepo6l3#

张贴在此供日后参考。
如果你想改变离子按钮的半径，我们可以使用下面的css。它是工作在expand="block"属性

ion-button {
  --border-radius: 20px;
  border-radius: 20px;
}

但是在离子按钮中，当我们使用expand="full"属性时，它不起作用。因此，为了克服这个限制，我们可以使用CSS Pseudo-elements。

为波纹管按钮添加边框半径 *

<ion-button fill="solid" type="submit" color="primary" expand="full" >Login</ion-button>

如下图所示，我们需要选择阴影DOM中的原生元素

我们可以使用下面的伪元素选择器

ion-button::part(native) {
    --border-radius: 20px;
    border-radius: 20px;
}

以上将在具有expand="full"属性的离子按钮上添加半径

赞(0）回复(0）举报 2022-12-16

我来回答

更改IONIC 4中的圆形css

3条答案

相关问题

热门标签

最新问答