ion-radio上的ionic v4隐藏的无线电图标

Question

实际上我需要像这样设计离子无线电组件

在ionic 3中，我可以使用覆盖CSS样式来设置离子无线电样式

.radio-md .radio-icon{
    display: none;
}
.item-md{
    border: 1px solid color($colors,divider);
    border-radius: 6px;
}
.item-radio-checked{
    border: 1px solid color($colors,primary);
}

我对离子4不了解。

如何使用ionic v4设置离子辐射样式？

Answer 1

这对于Ionic 4是不可能的。

与离子3组件不同，离子4组件是通过Web components使用Stencil.js构建的。这些组件的设计使得外部CSS样式不会影响组件本身。使用css 4 variables提供了一些样式选项。这些可以在外部为组件设置。

对于ion-radio，唯一提供的样式选项为color properties。

ion-radio{
    --color:#222
}

进一步阅读：setting ionic variables。

Answer 2

您无法删除单选图标。但是您可以将其颜色设置为透明。

ion-radio{
--color:transparent;
--color-checked: transparent;

}

Answer 3

您可以通过将离子无线电的宽度和高度添加到0来实现此目的