Crear instancias de un solo componente de diseño de materiales es sencillo. Por ejemplo,
import { MDCRipple } from "@material/ripple"; const iconButtonRipple = new MDCRipple(document.querySelector(".mdc-icon-button")); iconButtonRipple.unbounded = true; Cuando hay varios componentes, la documentación de MDC recomienda usar querySelectorAll de esta manera:
const iconButtonRipple = [].map.call( document.querySelectorAll(".mdc-icon-button"), function (el) { return new MDCRipple(el); } ); Sin embargo, la creación de instancias anterior no funciona y no sé dónde usar la línea iconButtonRipple.unbounded = true en esto. La única solución que tengo es asignar una clase especial a cada botón de icono e instanciarlo todo uno por uno.
¿Puede alguien ayudarme a crear una instancia de esto como el mencionado en la documentación?
Intentaría ejecutar esto:
const ripples = [...document.querySelectorAll(".mdc-icon-button")].map(el => { const ripple = new MDCRipple(el); ripple.unbounded = true; });o
const ripples = [...document.querySelectorAll(".mdc-icon-button")].map(el => new MDCRipple(el)); ripples.forEach(ripple => { ripple.unbounded = true; });