Share
Dans cet épisode de notre série Learning Material Design Lite (MDL), nous allons examiner le menucomposant. C'est un composant dont vous pouvez parfois avoir besoin pour fournir un menu contextuel des actions disponibles.
Dans Facebook, par exemple, vous pouvez voir un menu contextuel déployé dans la barre latérale où une liste d'amis en ligne et hors ligne est affichée. Le menu se trouve en bas, en ligne avec le formulaire de recherche, illustré par un équipement icône.
Menu contextuel de la barre latérale de Facebook.Il existe un autre bon exemple dans Gmail. Vous pouvez trouver ce menu contextuel en ligne avec le Boîte de réception onglet, sous le Composer bouton. Il fournit des actions pour trier les messages entrants dans votre boîte de réception pour une meilleure gestion de la messagerie..
Dans ce tutoriel, nous allons voir comment implémenter un menu contextuel à l'aide du composant de menu MDL. Cependant, avant de commencer, ajoutez les bibliothèques MDL - les feuilles de style et le JavaScript - au tête de votre document.
Une fois fait, allons!
Supposons que nous avons un site Web pour notre entreprise et que celle-ci compte maintenant plusieurs succursales dans différents pays. Nous avons maintenant besoin que le site Web soit présenté dans plusieurs langues. C’est un bon scénario où nous pourrions utiliser la composante menu de notre site Web: changer de langue.
Pour construire ce menu de changement de langue, nous commençons par créer un élément de bouton icône avec un identifiant afin que nous puissions le brancher sur le menu. Nous utiliserons l'icône du langage Material Design.
N'hésitez pas à opter pour un bouton plat si vous le trouvez plus adapté à la conception générale de votre site Web, par exemple:
Ensuite, nous ajouterons la liste des langues. Avant de le faire, nous devons décider où le menu doit apparaître par rapport à la position du bouton. Selon la configuration du site Web, le sélecteur de langue peut être affiché dans la navigation. Nous pouvons également l'ajouter n'importe où en bas, dans le bas de page.
Si nous trouvons que la position se trouve dans le coin inférieur droit du site, nous ajouterons le menu à l'aide de la classe Modifier: mdl-menu - en haut à droite. Comme le nom de la classe l’implique, le menu apparaît en haut à gauche du bouton. Remplacez la classe par l'une des classes suivantes pour positionner le menu différemment:
Accentsconagua
mdl-menu - en bas à droitemdl-menu - en bas à gauche: c'est la valeur par défaut si aucune autre classe n'est associée au menu. Le menu apparaîtra en bas, aligné à gauche.mdl-menu - en haut à gaucheNous pourrions ajouter le menu n'importe où. Mais il vaut mieux le garder proche, dans le même contenant que le bouton.
La chose à garder à l'esprit pour le balisage de menu est le pour attribut. Comme vous pouvez le voir ci-dessus, le pour la valeur d'attribut doit correspondre à la identifiant du bouton.
Si le bouton est placé en haut du site Web, le menu devrait apparaître en bas, en ajoutant le bouton mdl-menu - en bas à droite classe.
Une autre application possible du composant de menu consiste à améliorer la carte postale de notre blog à partir du tutoriel précédent. Là nous avons le message avec un bouton de partage; nous pourrions utiliser le composant de menu pour fournir des options pour la sélection de réseaux sociaux:
Le composant de menu MDL est facile à implémenter. Comme nous l’avons appris ici, il faut un élément de liste non ordonné avec quelques classes, puis nous avons le menu prêt à fonctionner - aussi simple que cela.
Dans le prochain tutoriel, nous verrons comment personnaliser tous les composants que nous avons utilisés jusqu'à présent. On se voit là-bas!
