[英]Change arrow colors in ng-bootstrap carousel
我正在使用 ng-bootstrap 創建輪播,我想將箭頭顏色或圖像從白色更改為黑色,因為我有白色背景圖像並且它們不可見。 我的問題是我無法獲得 span,我不知道如何在 scss 中調用它。 我正在將 bootstrap 4 和 ng-bootstrap 用於 angular https://ng-bootstrap.github.io/#/components/carousel/examples 。 當我在控制台中更改圖像 url 時,它可以工作。 我試圖直接獲得箭頭,但沒有任何反應。
我的代碼:
<div class="col-lg-6">
<div class="imageCarousel">
<ng-container *ngIf="product.images">
<ngb-carousel>
<ng-template id="imageSlide" ngbSlide *ngFor="let image of product.images | slice: 1">
<img [src]="image">
</ng-template>
</ngb-carousel>
</ng-container>
</div>
</div>
scss:
.imageCarousel {
max-height: 500px;
text-align: center;
color: $color2;
.carousel .slide {
width: 50px;
height: 50px;
background-image: url("https://storage.googleapis.com/staging.pc-shop-260af.appspot.com/ic_keyboard_arrow_right_black_24px.svg");
}
img {
// border: 2px solid blue;
max-width: 100%;
max-height: 400px;
}
}
是的,它已經解決了,但有時需要將視圖封裝設置為None
@Component({
selector: "app-builder",
templateUrl: "./builder.component.html",
styleUrls: ["./builder.component.css"],
encapsulation: ViewEncapsulation.None
})
ngb-carousel 使用 SVG 圖像作為控件,您可以使用自己的上一個和下一個按鈕圖像覆蓋它:
.carousel-control-prev-icon{
background-image: url('https://apufpel.com.br/assets/img/seta_prim.png')
}
.carousel-control-next-icon{
background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
}
Eduardo(以上)給出的答案僅在封裝設置為 ViewEncapsulation.None 時才有效,這可能會對 CSS 的其他方面產生意想不到的副作用。
相反,::ng-deep 偽類可用於針對特定的 CSS。 在您的 scss 文件中使用以下內容:
::ng-deep .carousel-control-prev-icon{
background-image: url('your-replacement.svg');
}
::ng-deep .carousel-control-next-icon{
background-image: url('your-replacement.svg');
}
首先,我建議升級到 ng-bootstrap v6+,它正確地使 ngb 組件 ViewEncapsulation 為 None,因此可以通過全局 CSS 或未封裝的組件 CSS 設置它。 請參閱( https://github.com/ng-bootstrap/ng-bootstrap/issues/3479 )。
其次,通過簡單地再次設置並將填充屬性更改為您想要的任何顏色來覆蓋 SVG。
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(50, 54, 57)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}
或者,如果您只是在尋找更多對比度,則可以反轉顏色:
.carousel-control-next-icon,
.carousel-control-prev-icon {
filter: invert(1);
}
設置封裝:主機組件上的ViewEncapsulation.None不是最佳實踐。 更聰明的做法是將這些條目更改到您的項目 style.scss(或在 angular.json 中指定為全局樣式文件的任何內容)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.