Редактировать теневой DOM в ioni c 4 - ионы-слайды - PullRequest
Новая
       12

Редактировать теневой DOM в ioni c 4 - ионы-слайды

0 голосов
/ 24 апреля 2020

У меня есть компонент ioni c 4 слайдов, в котором я хочу изменить стиль маркеров нумерации страниц 

<ion-slides class="lyt-carousel" pager="true" [options]="slideOpts">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>

Я могу изменить цвет пуль с помощью приведенного ниже кода (КОД # 1) Но я хочу добавить больше настроек, таких как border-color, padding и т. Д. c, в настоящее время я не могу это сделать (CODE # 2)

CODE # 1 

.lyt-carousel {
  --bullet-background-active: red;
  --bullet-background: white;
  }

КОД № 2 

ion-slides {
  .swiper-pagination-bullets {

    margin-top: 15px;
    .swiper-pagination-bullet {
      border: 5px solid blue;
    }
  }
}

1 Ответ

0 голосов
/ 25 апреля 2020

Хотя ::ng-deep является устаревшим . Взгляните здесь 

:host ::ng-deep .swiper-pagination-bullets {

  margin-top: 15px;

  .swiper-pagination-bullet {
    border: 5px solid blue;
  }
}

Я бы порекомендовал лучший способ реализовать свой собственный стиль, установив его из опций. Вот справочник API для дальнейшей необходимости 

slideOpts = {
  initialSlide: 0,
  speed: 400,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    renderBullet: (index, className) => {
      return '<span style="border: 5px solid blue;"class="' + className + '"></span>';
    }
  }
};
...