Antwort an „ebody“ verfassen

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

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen