Moderne Dropdown-Komponente HTML

TL;DR

Ich wollte mich der Herausforderung stellen, eine benutzerdefinierte Dropdown-Komponente zu erstellen, die mit HTML-Formularen funktioniert und auf allen Plattformen und Browsern gleich aussieht. Endlich habe ich es geschafft, eins zu machen, und so geht's...

Code

Der Code befindet sich auf diesem Codestift.

Wie es gemacht wird

• Erstellen Sie eine native Webkomponente, die das HTML-Element erweitert.
• Geben Sie ihm die Möglichkeit, mehrere Themen zu haben (unter Verwendung vordefinierter Farben in CSS).
• Ermöglicht das Festlegen seiner Elemente entweder mit setAttribute oder durch Auslösen eines Ereignisses, das die Elemente enthält.
• Hören Sie sich ein benutzerdefiniertes Ereignis an, das anzeigt, wann ein Element ausgewählt wird.
• Geben Sie ihm die Möglichkeit, Teil eines beliebigen HTML-Formulars zu sein. Beachten Sie, dass zum Zeitpunkt des Schreibens dieses Artikels element-internals-polyfill erforderlich ist, damit dies in einigen Browsern wie Safari funktioniert.

Benutzeroberfläche der Dropdown-Komponente

Es besteht aus drei Elementen.

1. ein schreibgeschütztes Eingabeelement, das das aktuell ausgewählte Element anzeigt.
2. ein (zunächst verstecktes) Div, das die Elemente im Dropdown-Menü enthält.
3. ein Symbol, das den Status des Dropdowns anzeigt (offen oder geschlossen). Beachten Sie, dass das verwendete SVG von Bootstrap-Symbolen übernommen wurde.

Geschäftslogik

1. Wenn die Verbindung hergestellt ist, wird die Komponente im ausgewählten Design angezeigt. Wählen Sie die Standardeinstellung, wenn keine ausgewählt ist.
2. Registrieren Sie die Dropdown- und Elementauswahlereignisse, die beim deklarativen Erstellen der Komponente übergeben wurden.
3. Sobald das Dropdown-Ereignis ausgelöst wird, erfassen Sie die Elemente und fügen Sie sie der Liste hinzu.
4. Geben Sie die Möglichkeit, das ausgewählte Element programmgesteuert festzulegen. Dies ist besonders nützlich, wenn der aktuell ausgewählte Artikel dem Dienstanbieter bereits bekannt ist. Zum Beispiel eine Liste von Standorten auf einer Buchungsseite, die idealerweise die aktuelle Stadt anzeigen sollte, in der der Benutzer wohnt.

Wie es aussieht

Abschluss

Wir haben mithilfe der für den Browser verfügbaren Tools eine moderne, anpassbare Dropdown-Komponente erstellt, die überall gleich aussieht. Wenn Sie Ergänzungen oder Fragen haben, lassen Sie es mich gerne wissen.

Viel Spaß beim Entwickeln!

Das obige ist der detaillierte Inhalt vonModerne Dropdown-Komponente HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!