MDC Ripple effect и MDC Switches работают только тогда, когда оба на одном и том же HTML, а не на разных, я выделил стили и все остальное, и я думаю, что это что-то в дизайне материала app.js
это то, как выглядит мой app.js
:
import {MDCRipple} from '@material/ripple';
const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));
import {MDCSwitch} from '@material/switch';
const switchControl = new MDCSwitch(document.querySelector('.mdc-switch'));
(only the top one seems to work when I put switch HTML and the button HTML in different HTML pages.)
what the html looks like when they are both together:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bundle.css">
</head>
<body>
<button class="mdc-button">
<span class="mdc-button__label">Button</span>
</button>
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
</div>
</div>
</div>
<label for="basic-switch">off/on</label>
<script src="bundle.js" async></script>
</body>
</html>
bundle.css
и bundle.js
создаются каждый раз webpack.config.js
.Ожидается, что оба переключателя будут работать и пульсации в кнопках, работающих на отдельных HTML-страницах.