search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.14k stars 2.15k forks source link

[mdc-auto-init] multiple registries/instantiations for same component #5840

Open CorporateDrone opened 4 years ago

CorporateDrone commented 4 years ago

Feature Request

When using auto-init to register a component, data-mdc-auto-init can contain a single value. Allow data-mdc-auto-init attribute to contain multiple values to be instantiated. This will allow a mdc-list item to be instated and also instantiate the ripple effect for the component.

Proposed solution

Allow multiple values to be added to the data-mdc-auto-init and be parsed upon processing For example: <li class="mdc-list-item" data-mdc-auto-init="MDCList MDCRipple">

Alternatives considered

Instantiating the ripple effect afterwards is possible, but defeats the purpose of the mdc-auto-init convenience.

MrSimmmons commented 4 years ago

Correct me if I'm wrong, but shouldn't the data-mdc-auto-init="MDCList" be put on the list parent rather than the list item? (See the docs here: https://material.io/develop/web/components/lists/#javascript) That way you can still bind the MDCRipple to the elements.

So the format would be like this:

<ul class="mdc-list" data-mdc-auto-init="MDCList">
  <li class="mdc-list-item" data-mdc-auto-init="MDCRipple">
    <span class="mdc-list-item__text">Item 1</span>
  </li>
  <li class="mdc-list-item" data-mdc-auto-init="MDCRipple">
    <span class="mdc-list-item__text">Item 2</span>
  </li>
</ul>