简体   繁体   中英

How to open the menu on tabs using Angular Material?

How to combine those two Material components to work together? I want just ordinary tabs, but with opening menu on them.

I tried doing this:

<mat-tab-group>
  <mat-tab label="A" [matMenuTriggerFor]="Menu" #menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">
    <div>
      Content
    </div>
  </mat-tab>
</mat-tab-group>

<mat-menu #Menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
</mat-menu>

Ok, I have figured it out.

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
        <button mat-icon-button [matMenuTriggerFor]="Menu" class="cloneIcon">
            <mat-icon>more_vert</mat-icon>
        </button>
        {{label}}
    </ng-template>

<mat-menu #Menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
</mat-menu>

  </mat-tab>
</mat-tab-group>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM