ionic-framework - ion-segment-button 指示器轮廓边框

Question

我正在使用 Ionic/Angular v5 并且我正在尝试设置一组离子段按钮的样式，以便将 OUTLINE 边框作为指示器我尝试使用阴影部分“指示器”和“指示器背景”来设置边框的颜色和粗细，背景颜色为透明以便显示为“轮廓”，但没有得到设置

我得到了 这个，但我想要实现的是在选中的按钮周围有一个红色边框，并且仍然显示按钮的“原始”背景颜色。

我的 CSS 是：

&::part(indicator) {
  height: 100%;
  color: var(--ion-color-tertiary);
  border-width: 3px;
  border-color: var(--ion-color-tertiary);
}
&::part(indicator-background) {
  color: transparent;
}

关于如何实现我正在寻找的风格的任何想法？

非常感谢克里斯

标签： ionic-framework

Answer 1

通过将 CSS 样式更改为：

&::part(indicator) {
  height: 100%;
  border-width: 3px;
  border-color: var(--ion-color-tertiary);
  border-style: inset;
}
&::part(indicator-background) {
  background: transparent;
}