nicht angemeldet
Material Components Filter Chips einbinden
0 0 
MudGuard
Material Components Filter Chips einbinden
Gunnar BittersmannHallo,
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
-
Was ist jetzt der Fehler und wie kann ich diesen beheben? Ursache scheint ja diese Zeile zu sein.
import {MDCChipSet} from '@material/chips';MDC ist nicht wirklich für den direkten Gebrauch im Browser gemacht, sondern wird im Idealfall über ein Build-Tool wie WebPack, Rollup oder Parcel eingebunden. Benutzt du eines dieser Tools? Falls nicht, dann würde Parcel emfpehlen, das kommt ohne komplizierte Konfiguration aus.
Außerdem ist das Paket
@material/chipswohl inzwischen alsdeprecatedeingestuft.Mit dem folgenden JavaScript wirst du zumindest die Fehlermeldung in deinem Codepen los:
import * as MaterialChips from "https://cdn.skypack.dev/@material/chips@11.0.0"; const MDCChipSet = MaterialChips.deprecated.MDCChipSet; const chipSetEl = document.querySelector('.mdc-chip-set'); const chipSet = new MDCChipSet(chipSetEl);Aber das Einbinden über ein CDN ist auch nur eine Krücke.
-
Vielen Dank, mit deinem Code funktioniert es.
Außerdem ist das Paket @material/chips wohl inzwischen als deprecated eingestuft.
const MDCChipSet = MaterialChips.deprecated.MDCChipSet;Wo hast du das gelesen/gefunden?
MDC ist nicht wirklich für den direkten Gebrauch im Browser gemacht, sondern wird im Idealfall über ein Build-Tool wie WebPack, Rollup oder Parcel eingebunden. Benutzt du eines dieser Tools? Falls nicht, dann würde Parcel emfpehlen, das kommt ohne komplizierte Konfiguration aus.
MDC sagt mir (bisher) gar nichts, auch mit den Tools habe ich noch nie gearbeitet. Wäre das auch notwendig, wenn ich...
npm install @material/...... oder https://github.com/material-components/material-components-web als Submodule verwenden würde?
Gruß ebody
-
So funktioniert es, wenn man die Komponeneten über CDN einbindet.
const chipSet = document.querySelector('.mdc-chip-set'); mdc.chips.MDCChipSet.attachTo(chipSet);import etc. benötigt man in diesem Fall gar nicht.
Gruß ebody
-
@@ebody
So funktioniert es
Nein, das tut es nicht. Von „funktionieren“ würde ich da nicht sprechen. Bei Tastaturnavigation kommt man nicht per Tab-Taste von einem Auswahl-Button(?) zum nächsten wie man das erwarten würde. Es geht mit Pfeiltaste, aber woher soll man das wissen?
Auch die Ansagen des Screenreaders erscheinen mir wirr. Kein Wunder bei
<div … role="grid">,<div … role="row">und<span role="gridcell">. Was soll der Quatsch?Ich würde den 5 Regeln zur Verwendung von ARIA noch eine nullte voranstellen: Verwende nicht ARIA, wenn du davon keine blasse Ahnung hast!
<span role="checkbox" tabindex="0" aria-checked="false" …>verstößt gegen die erste Regel: Verwende nicht ARIA, wenn es passende HTML-Elemente dafür gibt. Also warum ist das keine Checkbox mit Label? Die kann man ja auch anders stylen; das hatten wir letztens erst (ob Radiobutton oder Checkbox macht da keinen entscheiden Unterschied – außer rund und eckig).Aber sind das bei dir überhaup Checkboxen, also Eingabelemente, wobei deren Werte gesammelt beim Abschicken des Formulars ausgewertet werden?
Oder sind es Aktionslemente, wo schon die Interaktion damit sofort etwas bewirkt? In dem Fall sollten es wohl Buttons sein: Toggle-Buttons.
Was ist dein Anwendungsfall?
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
-
-
-
Hi,
ich möchte diese Filter Chips verwenden. Wenn man auf einen Chip klickt, wird ein Checkmark Icon eingefügt.
Wo ist Gunnar? Der hätte doch schon längst schreiben müssen, daß diese Chips unbenutzbar sind, weil ein span kein interaktives Element ist ...
cu,
Andreas a/k/a MudGuard-
@@MudGuard
Hi,
ich möchte diese Filter Chips verwenden. Wenn man auf einen Chip klickt, wird ein Checkmark Icon eingefügt.
Wo ist Gunnar?
Kaum ist man mal nicht da, bricht hier die Hölle los …
Ich hab aber einen Entschuldigungszettel: Gunnar war auf dem UXcamp. (Hab da auch was über Web-Typographie erzählt.
Der hätte doch schon längst schreiben müssen, daß diese Chips unbenutzbar sind, weil ein span kein interaktives Element ist ...
Naja, mit
roleundtabindexwurde es zu einem solchen gemacht. Ich hege aber Zweifel, dass das richtig gemacht wurde.😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
-