Плавающая кнопка действия Ripple Hidden - PullRequest
Новая
       81

Плавающая кнопка действия Ripple Hidden

0 голосов
/ 06 ноября 2019

Hello Stackoverflow,

У меня проблема с эффектом ряби в компоненте дизайна материала плавающей кнопки для Web. Мы создали небольшой компонент (как файл vue, поскольку мы работаем с vue) и создали экземпляр Ripple с помощью Javascript. Однако рябь не видна. Когда я щелкаю тень вокруг FAB, она немного меняется, но Ripple не видно. Об ошибках не сообщалось, и мы следовали документации Web FAB-компонента.

Я даже пытался изменить цвет FAB с помощью Sass Mixin, потому что я думал, что Ripple был слишком темным для Surface Color, но это не так. При изменении цвета Ripple по-прежнему не отображается.

Fab.vue: структура компонентов 

<button class="mdc-fab" v-bind:class="{
        'mdc-fab--extended': extended,
        'mdc-fab--mini': mini
    }">
        <i class="mdc-fab__icon" v-bind:class="iconType + ' fa-' + icon"></i>

        <span class="mdc-fab__label" v-if="extended">
            <slot></slot>
        </span>
</button>

Создание Javascript в Fab.vue 

new MDCRipple(this.$el);

Ripple работает в других компонентах, которые создаются аналогично. Может ли это быть ошибка в компоненте FAB или Ripple? Или я просто что-то делаю не так или что-то упускаю?

...