Эффект Google Material Ripple не работает со Sveltejs - PullRequest
Новая
       5

Эффект Google Material Ripple не работает со Sveltejs

0 голосов
/ 27 мая 2020

Я попытался поэкспериментировать с Google Material в своем веб-приложении Svelte JS.

После многих попыток я наконец смог показать кнопку, по крайней мере, как показано ниже.

enter image description here

Теперь моя проблема в том, что когда я нажимал кнопку, я не видел эффекта пульсации. Однако, когда я посмотрел на инструменты разработчика, я увидел, что эффект пульсации, по крайней мере, добавлен как класс в мою кнопку, как показано ниже.

enter image description here

Я следил за документацией Google Material , включая применение пульсации для кнопки, но безрезультатно.

Ниже моя Button.svelte реализация для Google Material: 

<script>
    import { onMount } from 'svelte';
  import {MDCRipple} from '@material/ripple';

  onMount(async () => {
        const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));
    });

</script>

<div class="mdc-touch-target-wrapper">
  <button class="mdc-button mdc-button--raised">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">Contained Button</span>
  </button>
</div>

<style lang="scss">
    @import "./theme-mui.scss";

    .mdc-button {
      padding: 1em 1.2em;
    }
</style>

Также здесь мой theme-mui.s css : 


@use "@material/button";
@use "@material/ripple";

@include button.core-styles;

1 Ответ

1 голос
/ 27 мая 2020

Нет гарантии, что он решит вашу проблему (потому что я не могу легко воспроизвести), но, по крайней мере, это более «изящный» способ решения проблемы. Нам не следует использовать document.querySelector, есть способ получше.

Мы можем привязать элемент HTML к локальной переменной. И затем мы можем использовать реактивную короткую руку для запуска оператора, когда привязанное значение обновляется 

<script>
  import { onMount } from 'svelte';
  import { MDCRipple } from '@material/ripple';

  let button;
  $: MDCRipple.attachTo(button);
</script>

<div class="mdc-touch-target-wrapper">
  <button bind:this={button} class="mdc-button mdc-button--raised">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">Contained Button</span>
  </button>
</div>

Теперь инициализация не выполняется при монтировании и для каждого элемента с этим классом, который он находит, а только для этого элемента и только когда он «присутствует».

...