6
votes

L'élément de menu du tapis de matériau angulaire doit être de la même taille que le bouton du menu du tapis

J'utilise le menu mat de matériau angulaire avec différents éléments de menu mat et je voudrais que la liste des éléments de menu soit de la même taille que le bouton.

Voilà ce que j'ai:

Et ce que je souhaite:

J'ai essayé de changer la taille du menu avec le css, mais cela ne fonctionne pas correctement.

CSS:

<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue">
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-icon>more_vert</mat-icon>
    <span fxFlex>OPTION</span>
  </div>
</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>unarchive</mat-icon>
    <span>First</span>
  </button>
  <button mat-menu-item>
    <mat-icon>file_copy</mat-icon>
    <span>Second</span>
  </button>
</mat-menu>

HTML:

.cdk-overlay-pane {width: 100%;}
.mat-menu-panel {width: 100%;}

J'ai fait un StackBlitz ICI pour mon menu de tapis.

Merci d'avance!

EDIT: J'ai changé mon code parce que j'utilise un bouton réactif avec la classe de bootstrap "btn-block".

angular css angular-material angular-material2 drop-down-menu

1 commentaires

remplacer .mat-menu-panel {largeur: 100%;} par .mat-menu-panel {largeur: 100%; remplissage: 0 10px;}

4 Réponses :

3
votes

Utilisez ::ng-deep pour .mat-menu-panel

::ng-deep .mat-menu-panel {
  padding: 0 10px!important;
  width: 100%!important;
}

Voir le code de travail

3 commentaires

Cela ne fonctionnera pas si vous augmentez la largeur du bouton. Il ajoute également un remplissage à gauche et à droite des éléments de menu, cassant ainsi le style matériel du menu.

Dans mon projet le bouton est réactif, la taille n'est pas fixe. J'ai changé ça dans mon StackBlitz

Ng deep est sur le point d'être obsolète. L'équivalent est simplement d'ajouter le style dans le fichier principal styles.css, sans ng-deep bien sûr.

0
votes

J'ai trouvé une solution vraiment pas propre, mais la voici:StackBlitz ICI

Si quelqu'un aurait une solution CSS, je suis intéressé.

HTML:

.cdk-overlay-pane {width: 100%!important;}
.mat-menu-panel {max-width: 100%!important; min-width: 64px!important;}

TS:

export class AppComponent implements DoCheck{
  ngDoCheck(){
    var widthButton=document.getElementById("button").offsetWidth;

    var elems = document.getElementsByClassName('mat-menu-panel');
    for(var i = 0; i < elems.length; i++) {
      elems[i].style.width = widthButton+"px";
    }
  }
}

CSS:

<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue" id="button">
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-icon>more_vert</mat-icon>
    <span fxFlex>OPTION</span>
  </div>
</button>

DÉMO:

0 commentaires

0
votes

Utilisez l'événement menuOpened pour matMenuTriggerFor et ajoutez une largeur d'exécution

HTML :

onMenuOpened() {
    const btn = document.getElementById('revisitSection');
    if (btn) {
      const elems = document.getElementsByClassName('button') as any;
      // for (let i = 0; i < elems.length; i++) {
      //   elems[i].style.width = `${btn.offsetWidth}px`;
      // }
      for (const item of elems) {
        item.style.width = `${btn.offsetWidth}px`;
      }
    }
  }

TS :

<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue"  (menuOpened)="onMenuOpened()" id="button">
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-icon>more_vert</mat-icon>
    <span fxFlex>OPTION</span>
  </div>
</button>

Je ne recommande pas d'utiliser ngDoCheck. il a plus de problème de performances.

0 commentaires

0
votes

Pour ceux qui recherchent ceci à l'avenir, vous pouvez le définir dans votre

.example-panel{

Pour rendre le menu mat dynamique, vous pouvez appliquer avec et style dans le composant css du fichier ts via [ngClass] = "getClassWithWidthandHieght ()". Par css, définissez la classe du div côté intérieur à la classe comme celle-ci, puis appliquez le le style vous définit les styles.

.mat-menu-panel {
  min-width: fit-content !important;
  padding: 0px 0px !important;
}

.cdk-overlay-pane {
  min-width: fit-content;
}

largeur min: 500px; }

0 commentaires