离子无线电上的离子v4隐藏无线电图标

Question

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

​

在离子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没有概念。

如何使用离子v4 ?设计离子无线电

Answer 1

无法移除无线电图标。但是你可以把它的颜色设置成透明的。

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

}

Answer 2

这与离子4是不可能的。

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

对于ion-radio，提供的唯一样式选项是颜色特性。

ion-radio{
    --color:#222
}

进一步阅读:设定离子变量。

Answer 3

您可以通过在离子无线电上将宽度和高度添加到0来实现这一点。