La balise SELECTMENU HTML

Présentation selectmenu : un contrôle de forme révolutionnaire

Cet article plonge dans le contrôle expérimental de la forme selectmenu , mettant en évidence ses capacités de style supérieures par rapport à la traditionnelle<select></select> Éléments. Nous explorerons les raisons de son développement et de son potentiel pour révolutionner la conception de la forme Web.

Les développeurs Web citent fréquemment les limites des contrôles de forme de style en tant que carence en plateforme majeure. L'enquête CSS 2020 est classée parmi les dix meilleures améliorations les plus nécessaires, avec<select></select> spécifiquement identifié comme l'élément le plus problématique à styliser efficacement. Tandis que la partie bouton de un<select></select> est relativement facile à coiffer, la personnalisation des options dans la liste déroulante reste incroyablement difficile.

Par conséquent, de nombreux systèmes de conception et bibliothèques de composants créent des éléments de sélection personnalisés à partir de zéro, en utilisant HTML, CSS et JavaScript. Cependant, la réalisation d'une accessibilité appropriée, de la navigation par clavier et du positionnement contextuel est complexe et prend du temps, ce qui entraîne souvent des menus sélectionnés inaccessibles.

Le Control selectmenu vise à résoudre ce problème persistant en fournissant une alternative intégrée et hautement stylable.

L'initiative d'interface utilisateur ouverte

L'initiative d'interface utilisateur ouverte, un effort de collaboration impliquant des développeurs, des concepteurs et des implémentateurs de navigateur, stimule le développement de selectmenu . Son objectif est de permettre aux développeurs de styliser entièrement et d'étendre les commandes d'interface utilisateur intégrées, notamment selectmenu , les listes déroulantes, les cases à cocher et les boutons radio. Cela implique la création de spécifications pour la mise en œuvre et le traitement des conditions d'accessibilité.

Bien que toujours à ses débuts, le projet progresse rapidement et les résultats sont prometteurs. Vous pouvez participer à la communauté de l'interface utilisateur ouverte et contribuer à son développement.

Le contrôle selectmenu

Implémenté dans Chromium (principalement par l'équipe Microsoft Edge, en collaboration avec Google Chrome), selectmenu est un nouveau contrôle intégré offrant une expérience de sélection d'options familière. Il dispose d'un bouton affichant la valeur sélectionnée, une fenêtre contextuelle déclenchée en cliquant sur le bouton et une liste d'options dans la fenêtre contextuelle.

Pourquoi un nouveau nom?

Le nom "SelectMenu" est un espace réservé, principalement parce que modifier considérablement<select></select> L'élément entraînerait des problèmes de compatibilité généralisés. Par conséquent, selectmenu est conçu comme un contrôle indépendant.

Commencer

Bien qu'il ne soit pas encore prêt pour la production, vous pouvez expérimenter avec selectmenu comme suit:

1. Utilisez une version canari d'un navigateur à base de chrome (chrome ou bord).
2. Activez le drapeau "Expérimental de fonctionnalités de plate-forme Web" dans about:flags et redémarrer.
3. Remplacer<select></select> Éléments de votre page Web avec selectmenu .

Bien que les fonctionnalités de base soient fournies par défaut, la véritable puissance de selectmenu réside dans ses options de style et d'extensibilité.

Commentaires encouragés!

L'équipe d'interface utilisateur ouverte accueille les commentaires. Les tests précoces aident à améliorer le contrôle. Rapport des bogues ou des limitations via le référentiel GitHub Open UI.

Comprendre l'anatomie selectmenu

Le style selectmenu nécessite de comprendre sa structure interne:

• <selectmenu></selectmenu> : L'élément racine contenant le bouton et la boîte de liste.
• <button></button> : Déclenche la visibilité de ListBox.
• <label></label> : (Facultatif) Affiche la valeur sélectionnée. Pas nécessairement dans le<button></button> .
• <listbox></listbox> : Enveloppements<option></option> et<optgroup></optgroup> Éléments.
• <optgroup></optgroup> : Groupes<option></option> Éléments avec une étiquette en option.
• <option></option> : Représente des valeurs sélectionnables.

Comportement par défaut

selectmenu imite le comportement de<select></select> . Le balisage minimal suffit:

<selectmenu>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</selectmenu>

Défaut<button></button> ,<label></label> , et<listbox></listbox> Les éléments sont automatiquement générés.

Style avec ::part()

Le pseudo-élément ::part() permet de coiffer les composants individuels:

 .my-select-menu :: part (bouton) {
  Couleur: blanc;
  Color d'arrière-plan: # F00;
  rembourrage: 5px;
  Border-Radius: 5px;
}

.my-select-menu :: part (listbox) {
  rembourrage: 10px;
  marge: 5px;
  Border: 1px rouge solide;
  Border-Radius: 5px;
}

Cela styles le bouton et la boîte de liste. ::part() fonctionne avec<button></button> ,<label></label> , et<listbox></listbox> .

Marquage personnalisé

Pour plus de contrôle, remplacez le balisage par défaut à l'aide de machines à sous nommées:

<selectmenu class="my-custom-select">
  <div slot="button">
    <button behavior="button">Ouvrir</button>
    <span class="label">Choisissez une option</span>
  </div>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
</selectmenu>

L'attribut slot="button" remplace le bouton par défaut. behavior="button" attribue le comportement et l'accessibilité du bouton. Des techniques similaires s'appliquent à la<listbox></listbox> .

Marquage extensible

Ajouter de nouveaux éléments pour étendre les fonctionnalités:

<selectmenu class="my-custom-select">
  <div slot="listbox">
    <div behavior="listbox" popup="">
      <h3 id="Fleurs">Fleurs</h3>
      <option value="Rose">Rose</option>
      <h3 id="Arbres">Arbres</h3>
      <option value="Willow">Saule</option>
    </div>
  </div>
</selectmenu>

Cela ajoute un regroupement et un style personnalisés.

Remplacement Shadow Dom (avancé)

Pour un contrôle complet, remplacez l'ombre DOM à l'aide attachShadow() . Cela offre une personnalisation maximale mais nécessite des techniques plus avancées.

Conclusion

selectmenu offre des améliorations significatives dans le style et l'extension traditionnelle<select></select> Éléments. Son implémentation de navigateur intégrée garantit l'accessibilité et le positionnement approprié. Bien que toujours expérimental, selectmenu détient un immense potentiel pour améliorer la conception de la forme Web. Participez à l'initiative d'interface utilisateur ouverte pour aider à façonner son avenir.

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!