Hallo,
ich möchte diese Filter Chips verwenden. Wenn man auf einen Chip klickt, wird ein Checkmark Icon eingefügt.
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