Реализация активного класса css на активном ion-slide

Я хочу изменить css активного слайда в DOM

.html

 <ion-slides>
  <ion-slide class="swiper-slide"></ion-slide>
  <ion-slide class="swiper-slide active"></ion-slide> // <-- Active slide in DOM
  <ion-slide class="swiper-slide"></ion-slide>
 </ion-slides>

Заранее спасибо..

.scss

  .slider_selected_text{
    color : #ed1a3b
    }
 .slider_unselected_text{
   }

person bunny    schedule 17.06.2019    source источник
comment
Отправной точкой является использование ngClass, например stackoverflow.com/questions/55146414/   -  person rtpHarry    schedule 17.06.2019


Ответы (1)


Трудно сказать, просите ли вы добавить класс active к стороне sccs или динамически добавить класс CSS к элементу ion-slide. Я предполагаю, что вы просите scss сторону. Если нет, дайте мне знать, и я обновлю ответ.

Вы можете добавить класс .active в scss файл следующим образом:

.swiper-slide {

   // Assuming "slider_selected_text" is covered by "swiper-slide" class

  & .slider_selected_text{ // note that there is a space between & and class name
    color : #ed1a3b
  }

  & .slider_unselected_text{

  }

  &.active{ // note that there is NOT a space between & and class name means this will apply to the elements having both classes

     & .slider_selected_text{ // note that there is a space between & and class name
        color : #ed1a3b
      }

      & .slider_unselected_text{

      }
  }

}

Надеюсь, это даст вам ключ к разгадке.

person Harun Yilmaz    schedule 17.06.2019
comment
Спасибо за ответ, Харун .. но я хочу динамически изменять класс CSS. При нажатии на ion-Slide этот конкретный слайд должен получить CSS slider_selected_text. Буду рад, если вы поможете мне с логикой! Заранее спасибо! - person bunny; 17.06.2019
comment
Хорошо, я понял. Постараюсь обновить ответ. - person Harun Yilmaz; 17.06.2019
comment
Я пробовал это в stackblitz, но есть проблема, которую я не могу решить сейчас. Но я попробую еще раз, когда у меня будет время. Тем временем вы можете искать ionSlideDidChange и getActiveIndex и устанавливать соответствующий класс с помощью ngClass. - person Harun Yilmaz; 17.06.2019
comment
Спасибо, Харун, за попытку! .. Сейчас я получаю ActiveIndex .. но я не знаю, как использовать этот индекс для изменения CSS. - person bunny; 17.06.2019
comment
<ion-slide class="swiper-slide" [ngClass]="{'slider_selected_text': activeIndex === 2}"></ion-slide> Думаю, что-то вроде этого сработает. Вам просто нужно сохранить активный индекс в свойстве activeIndex компонента. И 2 жестко запрограммирован, поскольку вы не используете *ngFor для создания слайдов. Вам необходимо изменить это соответствующим образом. - person Harun Yilmaz; 17.06.2019
comment
Или вы можете сделать что-то вроде: <ion-slide class="swiper-slide" [ngClass]="activeIndex === 2 : 'slider_selected_text' ? 'slider_unselected_text'"></ion-slide> - person Harun Yilmaz; 17.06.2019