如何去除离子 4 段指示器（底线）？请告诉我

Posted 2023-03-06

【中文标题】如何去除离子 4 段指示器（底线）？请告诉我

【英文标题】：how to remove ionic 4 segment indicator (bottom line)? please let me know

【发布时间】：2019-09-19 01:15:55

【问题描述】：

  .segment-button-indicator 
        -ms-flex-item-align: end;
        align-self: flex-end;
        width: 100%;
        height: 2px;
        background-color: var(--indicator-color);
        opacity: 1;
    

我是混合应用程序开发的新手。我必须使用离子段。有 ion-segment-indicator 指示离子段的底线，所以我需要将其删除。我可以从这些默认 css 代码中删除，但是当我尝试自定义它时并没有删除

【参考方案1】：

你不能删除它，但你可以通过将它的颜色设置为透明来隐藏它。

在 theme/variables.scss 上添加：

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

【参考方案2】：

放入你的 scss 页面

  ion-segment-button 
    --color-checked: red;
    --indicator-color: none;
  

边框底部指示器 段活动/选中的颜色

【参考方案3】：

请将以下代码粘贴到您的 variables.scss 中，它会起作用

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