Composant HTML de liste déroulante moderne

TL;DR

Je voulais me mettre au défi de créer un composant déroulant personnalisé qui fonctionne avec les formulaires HTML et qui se présente de la même manière sur toutes les plateformes et tous les navigateurs. J'ai finalement réussi à en faire un, et voici comment...

Code

Le code se trouve sur ce Code Pen.

Comment c'est fait

• Créez un composant Web natif qui étend l'élément HTML.
• Donnez-lui la possibilité d'avoir plusieurs thèmes (en utilisant des couleurs prédéfinies en CSS).
• Autoriser la définition de ses éléments soit en utilisant setAttribute, soit en déclenchant un événement contenant les éléments.
• Écoutez un événement personnalisé indiquant quand un élément est sélectionné.
• Donnez-lui la possibilité de faire partie de n'importe quel formulaire HTML. Notez qu'element-internals-polyfill est nécessaire pour que cela fonctionne sur certains navigateurs tels que Safari au moment de la rédaction de cet article.

UI du composant déroulant

Il est composé de trois éléments.

1. un élément d'entrée en lecture seule qui affiche l'élément actuellement sélectionné.
2. un div (initialement masqué) qui contient les éléments du menu déroulant.
3. une icône pour indiquer l'état de la liste déroulante (ouverte ou fermée). Notez que le svg utilisé est adapté des icônes Bootstrap.

Logique métier

1. Une fois connecté, affichez le composant dans son thème sélectionné. Choisissez celui par défaut si aucun n'est sélectionné.
2. Enregistrez les événements de la liste déroulante et de l'élément sélectionné transmis lors de la création déclarative du composant.
3. Une fois l'événement déroulant déclenché, capturez les éléments et ajoutez-les à la liste.
4. Donne la possibilité de définir l'élément sélectionné par programme. Ceci est particulièrement utile lorsque l'élément actuellement sélectionné est pré-connu du fournisseur de services. Par exemple, une liste d'emplacements sur un site de réservation et elle devrait idéalement afficher la ville actuelle dans laquelle réside l'utilisateur.

À quoi ça ressemble

Conclusion

Nous avons créé un composant déroulant moderne et personnalisable à l'aide des outils disponibles dans le navigateur et il est identique partout. N'hésitez pas à me faire savoir si vous avez des ajouts ou des questions.

Bon développement !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!