I'm learning how to make a simple website using Google's material design (web). I was following the steps here: google's material design button guide.
What I saw was just a button but it does not ripple when clicked. node-web-server/public/button.html:
<!DOCTYPE html>
<html>
<head>
<!-- Google Icons -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<!-- Material Design CSS and JS -->
<link
href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
<body>
<button class="mdc-button">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Button</span>
</button>
<script>
import { MDCRipple } from "@material/ripple";
const buttonRipple = new MDCRipple(document.querySelector(".mdc-button"));
</script>
</body>
</html>
Now the funny thing is, when I followed another guide here, I changed the script part and it worked. What I changed:
<script>
// import { MDCRipple } from "@material/ripple";
// const buttonRipple = new MDCRipple(document.querySelector(".mdc-button"));
const button = document.querySelector(".mdc-button");
mdc.ripple.MDCRipple.attachTo(button);
</script>
My question is why does the first method not work ? I installed the required material node modules. Under node-web-server/node_modules/, I am able to see the @material file.
If it helps this is my server.js. node-web-server/server.js:
const express = require("express");
var app = express();
app.use(express.static(__dirname + "/public"));
app.get("/", (req, res) => {
res.send("Hello Express");
});
app.listen(process.env.PORT || 3000);