5

I am currently using the "Manual Instantiation" method and it works great. I noticed the "Automatic Instantiation" method but can't get it to work. What exactly is needed to use this method?

When I use the code:

mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));

I get an error logging: "Uncaught ReferenceError: mdc is not defined".

Reference here: https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs#automatic-instantiation

Thanks.

Rhys
  • 489
  • 3
  • 14

2 Answers2

3

Material Components Web Docs - Auto Init

mdc-auto-init is a utility package that provides declarative, DOM-based method of initialization for MDC Web components on simple web sites. Note that for more advanced use-cases and complex sites, manual instantiation of components will give you more flexibility. However, mdc-auto-init is great for static websites, prototypes, and other use-cases where simplicity and convenience is most appropriate.

When mdc-auto-init attaches a component to an element, it assign that instance to the element using a property whose name is the value of data-mdc-auto-init. For example, given

<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
    <input class="mdc-text-field__input" type="text" id="input">
    <label for="input" class="mdc-floating-label">Input Label</label>
    <div class="mdc-line-ripple"></div>
</div>

<!-- at the bottom of the page -->
<script type="text/javascript">
    window.mdc.autoInit();
</script>

Once mdc.autoInit() is called, you can access the component instance via an MDCTextField property on that element.

henriquehbr
  • 1,063
  • 4
  • 20
  • 41
2

I just had to simply add the whole javascript file MDC package.

<script src="https://unpkg.com/material-components-web@0.36.1/dist/material-components-web.min.js"></script>

Only then is the mdc. defined and useable with auto-init.

Rhys
  • 489
  • 3
  • 14