ebody: Material Components Filter Chips einbinden

Beitrag lesen

problematische Seite

Hallo,

ich möchte diese Filter Chips verwenden. Wenn man auf einen Chip klickt, wird ein Checkmark Icon eingefügt.

Material Components Chips - Filter

Meine Anwendung entwickel ich lokal auf meinem PC. Hier ist aber auch eine Demo.

Ich binde CSS, JS und HTMl wie hier beschrieben ein:

https://material.io/components/chips/web#design-amp-api-documentation https://github.com/material-components/material-components-web

<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<style>
 @use "@material/chips/mdc-chips";
</style>
</head>
<body>
<div class="mdc-chip-set mdc-chip-set--filter" role="grid">
  <div class="mdc-chip" role="row">
    <div class="mdc-chip__ripple"></div>
    <span class="mdc-chip__checkmark" >
      <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
        <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
    </span>
    <span role="gridcell">
      <span role="checkbox" tabindex="0" aria-checked="false" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">Filterable content</span>
      </span>
    </span>
  </div>
</div>
</body>
<!-- Required Material Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script type="module" src="js/js.js"></script>

js/js.js:

 import {MDCChipSet} from '@material/chips';
 const chipSetEl = document.querySelector('.mdc-chip-set');
 const chipSet = new MDCChipSet(chipSetEl);

Ich erhalte die Fehlermeldung:

Uncaught TypeError: Failed to resolve module specifier "@material/chips". Relative references must start with either "/", "./", or "../".

Dann habe ich diese Varianten nacheinander ausprobiert:

// import {MDCChipSet} from '/@material/chips';
// import {MDCChipSet} from './@material/chips';
import {MDCChipSet} from '../@material/chips';

Dann erhalte ich die Fehlermeldung:

GET http://localhost/js/@material/chips net::ERR_ABORTED 404 (Not Found)

Keiner dieser Pfade passt.

Was ist jetzt der Fehler und wie kann ich diesen beheben? Ursache scheint ja diese Zeile zu sein.

import {MDCChipSet} from '@material/chips';

Gruß ebody