Ionic 如何去除离子4段指示剂(底线)?2请告诉我

o0lyfsai  于 2022-12-09  发布在  Ionic
关注(0)|答案(5)|浏览(154)
.segment-button-indicator {
        -ms-flex-item-align: end;
        align-self: flex-end;
        width: 100%;
        height: 2px;
        background-color: var(--indicator-color);
        opacity: 1;
    }

我是混合应用开发的新手。我必须使用离子段。离子段中有指示底线的离子段指示符,所以我需要删除它。我可以从这些默认的CSS代码中删除,但当我尝试自定义时,它没有删除

qlzsbp2j

qlzsbp2j1#

您无法移除它,但可以将它的颜色设定为透明来隐藏它。
theme/variables.scss上添加以下内容:

ion-segment-button {
  --indicator-color: transparent !important;
  --indicator-color-checked: transparent !important;
}
mm9b1k5b

mm9b1k5b2#

放入scss页面

ion-segment-button {
    --color-checked: red;
    --indicator-color: none;
  }
  • 下边框指示器
  • 活动/选中段的颜色
b09cbbtk

b09cbbtk3#

请将下面的代码粘贴到您的variables.scss中,它将工作

.segment-button-checked{
  --border-width:0px;
  --indicator-color-checked: 0;   
}
oknwwptz

oknwwptz4#

希望这能起作用

ion-segment-button{
  --indicator-box-shadow: none;
 }
py49o6xq

py49o6xq5#

在按钮上添加附加类以避免冲突,并且此样式

.YourSegmentClass::part(indicator-background) {
  background-color: #FAB159;
}

相关问题