Ich möchte über das wunderbare <details> -Element sprechen und einige Anwendungsbeispiele zeigen, von einfach bis verrückt.
Sie kennen das Layoutmodell einer Komponente, die ihren Status von sichtbar in verborgen ändern kann:
.component { display:none; } .component.open { display:block; }
toggleButton.onclick = () => component.classList.toggle('open')
Jetzt vergiss es. Es gibt einen Artikel, der dies sofort erledigt. Treffen - <details>
Das HTML-Element <details> wird verwendet, um verborgene (zusätzliche) Informationen anzuzeigen.
Basisanwendung
Lassen Sie uns zunächst sehen, wie dieses Element funktioniert:
Bitte beachten Sie, dass das Beispiel ohne zusätzliche Stile oder JavaScript funktioniert. Alle Funktionen sind im Browser selbst integriert.
Standardmäßig hängt der sichtbare Text von den Spracheinstellungen Ihres Systems ab. Sie können ihn jedoch ändern, indem Sie das Element <summary> zu <details> <summary> hinzufügen:
Um den Status eines Elements in HTML zu ändern, müssen Sie nur das Attribut open hinzufügen
<details open> ... </details> <details> ... </details>
Und um den Status mithilfe von JavaScript zu verwalten, wird eine spezielle API bereitgestellt:
const details = document.querySelector('details') details.open = true
Ein paar Worte zur Barrierefreiheit
Das <summary> -Element kann <summary> . Wenn Sie sich also über die Tastatur auf der Seite bewegen, gelangen Sie zu diesem Element. Der Inhalt kann jedoch nur dann <details> wenn <details> geöffnet ist, dh, der Fokus wird niemals auf unsichtbare Elemente in <details> .
In der Regel können Bildschirmleseprogramme die Standardverwendung von <details> und <summary> . Die Anzeige weist je nach Programm und Browser einige Unterschiede auf. Weitere Details .
Anwendungsbeispiele
Als nächstes werde ich einige der Komponenten aus der Bootstrap-Dokumentation grob wiederholen, aber mit wenig oder keinem JavaScript.
Ändern Sie die Markierung
Als Erstes müssen Sie möglicherweise das Erscheinungsbild des Markers ändern. Das geht ganz einfach:
summary::-webkit-details-marker { }
Oder Sie können den Standardmarker ausblenden und Ihren eigenen implementieren
details summary::-webkit-details-marker { display: none } details > summary { list-style: none; } details summary:before { content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; } details[open] summary:before { content: '\f146'; }
Komponente reduzieren
Hier ist alles einfach. Die Grundfunktionalität ist die gleiche. Das Erscheinungsbild muss nur geringfügig geändert werden:
Akkordeon-Komponente
Lassen Sie uns das vorherige Beispiel wiederholen, das Aussehen von <summary> leicht ändern und das Akkordeon erhalten:
Wie Sie sehen, wird ein Element jedoch nicht geschlossen, wenn ein anderes geöffnet wird. Um dies zu erreichen, benötigen wir ein paar Zeilen JavaScript. Sie müssen die Darstellung des offenen Attributs in einem der <details> -Elemente verfolgen und aus dem Rest löschen:
Popover-Komponente
Diese Implementierung ist der Collapse-Komponente sehr ähnlich, mit dem Unterschied, dass der Inhalt <details> absolut positioniert ist und den Inhalt überlappt.
Dropdown-Komponente
Grundsätzlich ist dies die gleiche Popover-Komponente. Nur das Aussehen unterscheidet sich.
Das gleiche Beispiel, nur mit einem separaten Knopf
Die Dropdown-Komponente hat jedoch einen weiteren wichtigen Unterschied: Wenn Sie darauf klicken, sollte sie ausgeblendet sein. Um dies erneut zu implementieren, müssen Sie einige Zeilen JavaScript schreiben.
Modale Komponente
Und schließlich ein Beispiel für ein modales Fenster.
Im Allgemeinen ist <details> nicht die beste Wahl für die Implementierung dieser Komponente. Es gibt ein viel besser geeignetes Element - <dialog> , aber es hat eine sehr schlechte Browserunterstützung.
Referenzen
Kann ich Details & Zusammenfassungselemente verwenden?
MDN-Detailelement
W3C-Detailelement
UPD
Ich habe beschlossen, ein weiteres Beispiel für die Verwendung von <details> hinzuzufügen - die mehrstufige Navigation. Ich möchte noch einmal darauf hinweisen, dass das Beispiel ohne JavaScript funktioniert. Und es ist viel umfassender als das traditionelle Layout auf dem <div> .