Question

我在项目中使用带有标签和滑动段的自定义图标。看起来像这样：我正在尝试所有方式来选择它，将图标颜色更改为我想要的颜色。当我单击时，如果按住单击，它会变暗，因此我相信可以更改，但是我不知道自己在做什么错。如果有人知道如何帮助我，请问我已经很久了，我无法获得答案。 meu codigo .TS

@ViewChild('SwipedTabsSlider') SwipedTabsSlider: Slides
SwipedTabsIndicator: any = null;
tabs: any = [];
this.tabs = ["selectTab(0)", "selectTab(1)", " selectTab(2)", 
"selectTab(3)", "selectTab(4)"];
ionViewDidEnter() {
this.SwipedTabsIndicator = document.getElementById("indicator");
}
selectTab(index) {    
this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+ 
(100*index)+'%,0,0)';
this.SwipedTabsSlider.slideTo(index, 500);
}
updateIndicatorPosition() {
  // this condition is to avoid passing to incorrect index
if( this.SwipedTabsSlider.length()> this.SwipedTabsSlider.getActiveIndex())
{
    this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+ 
(this.SwipedTabsSlider.getActiveIndex() * 100)+'%,0,0)';
}
}
animateIndicator($event) {
if(this.SwipedTabsIndicator)
    this.SwipedTabsIndicator.style.webkitTransform = 'translate3d(' + 
(($event.progress* (this.SwipedTabsSlider.length()-1))*100) + '%,0,0)';
}

MEU CODIGO SCSS

.SwipedTabs-indicatorSegment{
    -webkit-transition: 0.2s all;
    -moz-transition:  0.2s all;
    -o-transition:  0.2s all;
    transition:  0.2s all;
    transform-origin: top 0 left 0;
    height: 6px;
    position: relative;
    top: -2px;
    background-color: #179c90 !important;
}

// COR GASTRONOMIA/COMPRAS/PASSEIOS  SEGMENTS //
.SwipedTabs-tabs ion-segment-button
{
    border:none !important;
    background-color:white!important;


    ion-icon:before {
        font-size: 4rem !important;    
        color:rgba(0, 0, 0, 0.596);
    }   

}
.SwipedTabs-tabs ion-segment-button.SwipedTabs-activeTab{


    }
.SwipedTabs-tabs
{

    border-bottom: solid 3px #00000062  !important;
    border:none;
}




.segment-button {
    border-style: none;
    border-color: #332d2c;
    color: #393d37;
    border-width: none;
    background-color: rgb(77, 67, 67);


    &.activated, &.segment-activated {   

        //border-bottom: 2px solid red !important;

        color:#179c90  !important;
        background: transparent !important;

    }
}

ion-segment-button {
    border-style: solid;
    height: 6px;
    font-size: 11px !important;

}

E MEU CODIGO HTML：

<div no-padding>
<ion-segment [(ngModel)]="Menu" class="SwipedTabs-tabs">

  <ion-segment-button (click)="selectTab(0)">
    <ion-icon name="icon-ico_gastronomia_off"></ion-icon>
  </ion-segment-button>

  ...

  <div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]=" 
  {'width.%': (100/this.tabs.length)}"></div>

  <ion-slides #SwipedTabsSlider (ionSlideDrag)="animateIndicator($event)" 
  (ionSlideWillChange)="updateIndicatorPosition()"
  (ionSlideDidChange)="updateIndicatorPosition()" 
  (pan)="updateIndicatorPosition()" [pager]="false">
  ...

  ion-segment mode="md" [(ngModel)]="Menu">
      <ion-segment-button value="Todosgastronomia" class="round-button" 
  (click)="selecionaprodutoscategoria(1)">
        Todos
      </ion-segment-button>
  ...

段按钮不变色

0 个答案: