Ionic 4 组件库 ion-radio css 定制答案

【问题标题】：Ionic 4 component library ion-radio css customisationIonic 4 组件库 ion-radio css 定制
【发布时间】：2020-01-15 02:18:50
【问题描述】：

我对 Ionic 4 组件库中的 ion-radio 组件有疑问。不幸的是，这个组件https://ionicframework.com/docs/api/radio 很少允许通过 CSS 变量自定义它的 CSS。我想要实现的是设置此复选框图标的样式以匹配此 https://i.stack.imgur.com/PQnkY.png 。当前样式是默认样式，对应于https://i.stack.imgur.com/Vm9UQ.png。我尝试针对内部类无济于事。我认为这是因为 div 是在组件 ion-radio 本身的 shadow-dom 内呈现的。我知道这可以用 javascript 完成，我宁愿将其作为最后的手段。有谁知道使用此组件实现相同样式的任何其他解决方案？

谢谢

【问题讨论】：

标签： ionic4

【解决方案1】：

Ionic 问题 #20140 将向 ion-radio 组件引入新的变量属性 --border-radius 和 --inner-border-radius。已接受的PR包含在5.0.0-beta.3中。

虽然如果您不使用 5.0.0-beta.3 或更高版本，内边框半径设置为 50%，但您仍然可以更改 CSS 以满足您的一些需求。也许是这样的？

ion-radio {
    --color-checked:green;
    --color:green;
    margin-top: 20px;
    width: 30px;
    height: 30px;
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以使用 CSS 来实现这一点。隐藏ion-radio：

ion-radio {
  opacity: 0;
  width: 0px;
  margin: 0px;
}

将您的自定义单选按钮/形状放入ion-item：

<ion-radio-group>
  <ion-item>
     <ion-radio slot="start" value="foo" checked></ion-radio>
     <ion-icon slot="start" mode="ios" name="radio-button-off" />
     <ion-label>foo</ion-label>
  </ion-item>
  <ion-item>
     <ion-radio slot="start" value="bar" checked></ion-radio>
     <ion-icon slot="start" mode="ios" name="radio-button-off" />
     <ion-label>bar</ion-label>
  </ion-item>
</ion-radio-group>

使用 Ionic .item-radio-checked 类：

ion-radio-group .item-radio-checked ion-icon {
  fill: teal;
}

ion-radio-group ion-icon::after {
  content: "";
  width: 14px;
  height: 14px;
  background: teal;
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  transform: scale(0);
}

ion-radio-group .item-radio-checked ion-icon::after {
  transform: scale(1);
}

这仅适用于 md 模式，但您可以使用 CSS 进一步自定义 ios。

【讨论】：