Creating Many Material Design Elements

Question

Creating Many Material Design Elements

Setting up a single Material Design Component is easy. For instance,

import { MDCRipple } from "@material/ripple";
const iconButtonRipple = new MDCRipple(document.querySelector(".mdc-icon-button"));
iconButtonRipple.unbounded = true;

But when dealing with multiple components, the MDC documentation suggests using querySelectorAll like so:

const iconButtonRipple = [].map.call(
    document.querySelectorAll(".mdc-icon-button"),
    function (el) {
        return new MDCRipple(el);
    }
);

Unfortunately, this method doesn't seem to work for me and I'm unsure where to include the

iconButtonRipple.unbounded = true

line in all of this. The only solution I've found is to individually assign a unique class to each icon button and initialize them one by one.

If anyone could assist me in setting this up as per the documentation's recommendation, it would be greatly appreciated.

javascript material-components-web

Answer 1

Answer №1

One possible solution is to execute the following code snippet:

const buttons = [...document.querySelectorAll(".mdc-icon-button")].map(element => {
  const rippleEffect = new MDCRipple(element);
  rippleEffect.unbounded = true;
});

Alternatively, you can try this:

const buttons = [...document.querySelectorAll(".mdc-icon-button")].map(element => new MDCRipple(element));
buttons.forEach(btn => {
  btn.unbounded = true;
});

Answer 2

One possible solution is to execute the following code snippet:

const buttons = [...document.querySelectorAll(".mdc-icon-button")].map(element => {
  const rippleEffect = new MDCRipple(element);
  rippleEffect.unbounded = true;
});

Alternatively, you can try this:

const buttons = [...document.querySelectorAll(".mdc-icon-button")].map(element => new MDCRipple(element));
buttons.forEach(btn => {
  btn.unbounded = true;
});

Creating Many Material Design Elements

Answer №1

Similar questions

Having trouble with a JavaScript function and tag that don't seem to be working in Chrome, but function well in Mozilla Firefox. Can anyone provide assistance with

"Encountering an issue with toUpperCase function in Next.js when incorporating slug - any

Select the send all text option when making a request

Crafting a clever smart banner using jquery.smartbanner for Android Firefox users

Utilizing the 'new' operator in the creation of Mongoose schema structures

Tips for displaying an asp.net form using javascript functions

Utilizing Backbone.js: Passing a variable from a route to a view, collection, or model

Array's Javascript length of 0

The alert feature is triggered when any button is pressed

Converting request.body into a string before building a JSON object

Creating numerous hash codes from a single data flow using Crypto in Node.js

Swap out any terms in a sentence that correspond to words found in a different array

The Autocomplete field's label remains visible even after the form is submitted

Angular // binding innerHTML data

Decoding a formatted string

Conceal content upon clicking with JavaScript

What steps should I take to repair this array table?

"Bootstrap is functioning properly on my local environment, but it seems to

Is there a way to display the button only when the user is able to enter an email in the input field?

The Signature Pad loses its focus