Closed peterpeterparker closed 6 years ago
I've run into similar situations as well.
Stencil documentation: https://github.com/ionic-team/stencil-site/blob/master/src/docs-md/reference/styling.md#things-to-remember-with-shadow-dom
Unfortunately CSS Shadow Parts is a bit restrictive and would require modifying the inner-workings of the component.
My solution was to inject the styles into the shadow root using javascript.
Here is the repo: https://github.com/adamlacombe/Shadow-DOM-inject-styles
Let me know if that helps.
@adamlacombe thx for the idea 👍 that or writing my own slide component
in any case I would rather like an "official" solution than a workaround, but if such a thing never happens sure I'll give a try, thx
I am also facing the same issue, but looking in their code, they allow changing the bullet background, progress bar background and scroll bar background for now. The code right now seems to be using these variables
// Pagination Bullets
// --------------------------------------------------
.swiper-pagination-bullet {
background: var(--bullet-background);
}
.swiper-pagination-bullet-active {
background: var(--bullet-background-active);
}
So only for limited stuff, we can use something like this:
.custom-bullets {
--bullet-background: #fff;
--bullet-background-active: green;
}
where custom-bullets is a class for slides added by you. While this won't solve all the cusomization issues, but if someone is just looking to change progress bar colors, this is the way.
Do you like hacks? Do you like having the pagination of your swiper positioned at the bottom of your slider but without touching the nested element?
Here you go: the tricks is to declare the swiper options as custom
but to actually render a slider as progressBar
but with a bottom position 😜
<ion-slides pager="true" [options]="slideOptsProgressbar">
</ion-slides>
slideOptsProgressbar: SwiperOptions = {
pagination: {
el: '.swiper-pagination',
type: 'custom',
renderCustom: (swiper, current, total) => {
return this.customProgressBar(current, total);
}
}
};
private customProgressBar(current: number, total: number): string {
const ratio: number = current / total;
const progressBarStyle: string = 'style=\'transform: translate3d(0px, 0px, 0px) scaleX(' + ratio + ') scaleY(1); transition-duration: 300ms;\'';
const progressBar: string = '<span class=\'swiper-pagination-progressbar-fill\' ' + progressBarStyle + '></span>';
let progressBarContainer: string = '<div class=\'swiper-pagination-progressbar\' style=\'height: 4px; top: 6px; width: 100%;\'>';
progressBarContainer += progressBar;
progressBarContainer += '</span></div>';
return progressBarContainer;
}
enjoy
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
Ionic Info @ionic/angular: "4.0.0-beta.1"
Describe the Feature Request I would like to be able to style the
swiper-pagination
element of theslides
For example, in my v3 app, I display the pagination as
progressbar
at the bottom of the slidesBecause of shadow dom, this isn't possible anymore, a style like the following won't be applied
Related Code