Material Design Components Web in Chrome Extension

1.8k Views Asked by O P At 21 October 2024 at 03:47

I have a Chrome extension that currently uses Material Design Components, Web. I have no issues using unminified CSS, however the JS does not appear to be working correctly.

If I use the source code, there should be an animation when focusing on a text field as the example shows, but I do not experience this in my extension.

I'm really hoping this isn't some sort of security limitation by Chrome... wouldn't make sense that their browser couldn't detect and support their own framework.

popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chrome Ext</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <div class="mdc-text-field">
      <input type="text" id="my-text-field" class="mdc-text-field__input">
      <label class="mdc-floating-label" for="my-text-field">Hint text</label>
      <div class="mdc-line-ripple"></div>
    </div>
  </body>
</html>

The "Hint Text" should appear above the text, like the example above.

Note: I had no problem with Material Design Lite, but since that is no longer supported, I figured I'd rebuild using the modern framework.

Original Q&A

There are 1 best solutions below

benvc On 21 September 2018 at 18:16

MDC is a bit different than MDL in that the js dependent features require you to instantiate the MDC component. There are various ways to do that depending on how you are incorporating the MDC js into your project. In your html example above, you could probably add a script tag with a one-liner to instantiate the MDC textfield. Something like:

<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).

Material Design Components Web in Chrome Extension

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-CHROME

Related Questions in GOOGLE-CHROME-EXTENSION

Related Questions in MATERIAL-DESIGN

Related Questions in MDC-COMPONENTS

Trending Questions

Popular # Hahtags

Popular Questions