Bootstrap 4 carousel-control-color 条件颜色 - SVG

Posted 2023-03-21

【中文标题】Bootstrap 4 carousel-control-color 条件颜色 - SVG

【英文标题】：Bootstrap 4 carousel-control-color conditional colors - SVG

【发布时间】：2018-10-23 06:56:33

【问题描述】：

我试图为渲染的 SVG 图标使用不同的颜色来控制轮播。

我将箭头的默认颜色更改如下：

$carousel-control-color:            $secondary !default;

这使箭头按我的意图变为绿色。 但是现在我有一张具有主要背景颜色的卡片，并且我希望箭头在这个特定的 div 内具有白色。因为您可以想象，$primary 背景上的 $primary 颜色并不是真正可读的。

我尝试使用条件逻辑来设置变量的值，但它并没有像我想象的那样覆盖该值。

.widget 
    &.widget-support-slider 
        .carousel-control-prev-icon,
        .carousel-control-next-icon 
            @if $carousel-control-color == $primary
                    $carousel-control-color: white;
                    color: $carousel-control-color;
                

        
    

对应的 html

<div class="card widget-card bg-primary text-light widget-support-slider mt-3">
<div class="card-header py-2">
    <span class="text-primary">Lorem</span> ipsum dolor sit
    <div class="carousel-controls">
    <a class="carousel-control-prev" href="#support-slider" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Vor</span>
    </a>
    <a class="carousel-control-next" href="#support-slider" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Zurück</span>
    </a>
    </div>
</div>
<div class="card-body p-0">
    ...
</div><!-- /.card-body -->

我也尝试过更改颜色或填充属性，但这些都不会更改箭头颜色。 bootstrap sass 中是否有我忽略的内置函数？

干杯。

引导 v4.1

【问题讨论】：

我实际上发现了一些有用的东西here。但必须有一个更优雅的解决方案。用 20 个或更多不同的轮播和背景来维持这个可能是地狱。 :(

【参考方案1】：

在测试了很多东西之后，我终于找到了一个对我来说有点“不错”的解决方案。关于维护它可以接受。建议虽然受到高度赞赏。

我现在正在使用一个 mixin，它会吐出两个箭头类。

@mixin carousel-control-fill($color) 
    .carousel-control-prev-icon 
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23#$color' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    

    .carousel-control-next-icon 
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23#$color' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    


// setting a color variable without the #
$carousel-control-color-inverse: fff;

&.widget-support-slider 
    // using it
    @include carousel-control-fill($carousel-control-color-inverse);

一个缺点是因为它需要一个转义的#，我必须使用一个没有# 的变量。这不像我想要的那样干燥。