web-dev-qa-db-fra.com

Angular 2 Material Customize md-menu

Je suis nouveau sur Angular 2 Material et j'essaie de personnaliser le style du composant md-menu.

<md-icon class="material-icons" [mdMenuTriggerFor]="menu">dehaze</md-icon>
<md-menu #menu="mdMenu" [overlapTrigger]="false">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

Les paramètres de style prédéfinis fonctionnent bien (par exemple, définir le menu sur non-chevauchement), mais je voudrais définir le menu md à 100% de largeur et avoir un petit espace entre le bouton md-icon, qui élargit le menu, que je ne peut pas faire avec les directives prédéfinies de Angular 2 Material .

Jusqu'à présent, j'ai trouvé une solution avec la commande/deep/css, mais j'ai lu que la commande n'est plus prise en charge par les principaux navigateurs.

Quelle est une bonne façon de personnaliser un composant de matériau Angular 2? Comment pourrais-je styler mon menu md, afin qu'il ait 100% de largeur et un espace entre son bouton d'expansion?

Pour illustrer de quoi je parle: Brouillon du men

htmlcssangularangular-material2
10
Polarfox

Vous pouvez passer des classes personnalisées aux menus.

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="my-full-width-menu">

Ensuite, vous pouvez cibler cette classe avec des styles globaux.

Pour vos besoins, malheureusement, vous aurez besoin de connaître certaines informations sur l'emplacement de votre superposition de menu et de coder en dur un repositionnement

.mat-menu-panel.my-full-width-menu {
  max-width: none;
  width: 100vw;
  margin-left: -8px;
  margin-top: 24px;
}

Démo Plunker

La façon droite de le faire est de créer un composant de superposition personnalisé avec le OverlayModule du matériau (actuel dans le package de matériaux, mais bientôt déplacé vers le cdk) .

12
Will Howell

Dans Angular, ViewEncapsulation.Emulated est l'option par défaut, ce qui signifie qu'il essaie de restreindre la portée de l'affect en ajoutant des clés de substitution à l'élément Host, etc. Une option pourrait être de l'ajouter en dessous de CSS. Mais attention, cette profondeur sera également dépréciée bientôt. Faut attendre pour connaître l'alternative! https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

::ng-deep .mat-menu-panel {
  max-width: none!important;
  min-width: 400px!important;
}
6
nsk

Pour styliser le menu mat sans désactiver l'encapsulation pour ce composant, vous devez utiliser 2 classes pour augmenter la spécificité aussi exactement que vous l'avez déjà fait ou utiliser! Important. Cependant, pour le faire fonctionner, vous devez les mettre dans votre feuille de style globale afin de remplacer les styles par défaut.

4
Atanas Beychev