Question

我正在与MDC合作，并尝试在我的滑块上应用波纹效果。我按照文档进行操作，并添加了Sass mixins，但是仅当我选择整个滑块（而不仅仅是拇指）时，这些样式才适用。我尝试了多种不同的Sass组合来选择拇指/容器，但是都没有用。我还尝试将样式移至全局sass文件而不是组件样式，但这也没有成功。

MDC Documentation

//These styles apply 
.mdc-slider{
    @include mdc-ripple-surface;
    @include mdc-ripple-radius-unbounded(100%);
    @include mdc-states($action-blue, true);
    @include mdc-states-base-color($action-blue);
    @include mdc-states-hover-opacity(.1);
    @include mdc-states-focus-opacity(.26);
    @include mdc-states-press-opacity(.26);
}

//These do not
.mdc-slider__thumb{
    @include mdc-ripple-surface;
    @include mdc-ripple-radius-unbounded(100%);
    @include mdc-states($action-blue, true);
    @include mdc-states-base-color($action-blue);
    @include mdc-states-hover-opacity(.1);
    @include mdc-states-focus-opacity(.26);
    @include mdc-states-press-opacity(.26);
}

.mdc-slider__thumb-container{
    @include mdc-ripple-surface;
    @include mdc-ripple-radius-unbounded(100%);
    @include mdc-states($action-blue, true);
    @include mdc-states-base-color($action-blue);
    @include mdc-states-hover-opacity(.1);
    @include mdc-states-focus-opacity(.26);
    @include mdc-states-press-opacity(.26);   
}

<mdc-slider min="0" max="50" value="35"></mdc-slider>

在MDC滑块上实现波纹

0 个答案: