src/dev-app/menu/menu-demo.html - main - githubmirror/components

src/dev-app/menu/menu-demo.html
247 строк8 KB
Karl Seamon
fix(material/menu): Do not open the menu when trigger is aria-disabled (properly handle disabledInteractive) (#32601)
06 янв 2026, 00:13
06 янв 2026, 00:137b2627d
<div class="demo-menu">
  <div class="demo-menu-section">
    <p>You clicked on: {{ selected }}</p>

    <mat-toolbar>
      <button matIconButton [matMenuTriggerFor]="menu" aria-label="Open basic menu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu #menu="matMenu">
      @for (item of items; track item) {
        <button mat-menu-item (click)="select(item.text)" [disabled]="item.disabled">
          {{ item.text }}
        </button>
      }
    </mat-menu>
  </div>
  <div class="demo-menu-section">
    <p>Menu with divider</p>

    <mat-toolbar>
      <button matIconButton [matMenuTriggerFor]="divider" aria-label="Open basic menu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu #divider="matMenu">
      @for (item of items; track item) {
        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
        @if (!$last) {
          <mat-divider></mat-divider>
        }
      }
    </mat-menu>
  </div>
  <div class="demo-menu-section">
    <p>Nested menu</p>

    <mat-toolbar>
      <button matIconButton [matMenuTriggerFor]="animals">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu #animals="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>

    <mat-menu #vertebrates="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
      <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
      <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
      <button mat-menu-item>Birds</button>
      <button mat-menu-item>Mammals</button>
    </mat-menu>

    <mat-menu #invertebrates="matMenu">
      <button mat-menu-item>Insects</button>
      <button mat-menu-item>Molluscs</button>
      <button mat-menu-item>Crustaceans</button>
      <button mat-menu-item>Corals</button>
      <button mat-menu-item>Arachnids</button>
      <button mat-menu-item>Velvet worms</button>
      <button mat-menu-item>Horseshoe crabs</button>
    </mat-menu>

    <mat-menu #fish="matMenu">
      <button mat-menu-item>Baikal oilfish</button>
      <button mat-menu-item>Bala shark</button>
      <button mat-menu-item>Ballan wrasse</button>
      <button mat-menu-item>Bamboo shark</button>
      <button mat-menu-item>Banded killifish</button>
    </mat-menu>

    <mat-menu #amphibians="matMenu">
      <button mat-menu-item>Sonoran desert toad</button>
      <button mat-menu-item>Western toad</button>
      <button mat-menu-item>Arroyo toad</button>
      <button mat-menu-item>Yosemite toad</button>
    </mat-menu>

    <mat-menu #reptiles="matMenu">
      <button mat-menu-item>Banded Day Gecko</button>
      <button mat-menu-item>Banded Gila Monster</button>
      <button mat-menu-item>Black Tree Monitor</button>
      <button mat-menu-item>Blue Spiny Lizard</button>
    </mat-menu>
  </div>
  <div class="demo-menu-section">
    <p>Clicking these will navigate:</p>
    <mat-toolbar>
      <button matIconButton [matMenuTriggerFor]="anchorMenu" aria-label="Open anchor menu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu #anchorMenu="matMenu">
      @for (item of items; track item) {
        <a mat-menu-item href="https://www.google.com" [disabled]="item.disabled">
          {{ item.text }}
        </a>
      }
    </mat-menu>
  </div>
  <div class="demo-menu-section">
    <p>Position x: before</p>
    <mat-toolbar class="demo-end-icon">
      <button matIconButton [matMenuTriggerFor]="posXMenu" aria-label="Open x-positioned menu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu xPosition="before" #posXMenu="matMenu">
      @for (item of iconItems; track item) {
        <button mat-menu-item [disabled]="item.disabled">
          <mat-icon>{{ item.icon }}</mat-icon>
          {{ item.text }}
        </button>
      }
    </mat-menu>
  </div>
  <div class="demo-menu-section">
    <p>Position y: above</p>
    <mat-toolbar>
      <button matIconButton [matMenuTriggerFor]="posYMenu" aria-label="Open y-positioned menu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu yPosition="above" #posYMenu="matMenu">
      @for (item of items; track item) {
        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
      }
    </mat-menu>
  </div>
</div>

<div class="demo-menu">
  <div class="demo-menu-section">
    <p>overlapTrigger: true</p>

    <mat-toolbar>
      <button matIconButton [mat-menu-trigger-for]="menuOverlay">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu [overlapTrigger]="true" #menuOverlay="matMenu">
      @for (item of items; track item) {
        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
      }
    </mat-menu>
  </div>
  <div class="demo-menu-section">
    <p>Position x: before, overlapTrigger: true</p>
    <mat-toolbar class="demo-end-icon">
      <button matIconButton [mat-menu-trigger-for]="posXMenuOverlay">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu xPosition="before" [overlapTrigger]="true" #posXMenuOverlay="matMenu">
      @for (item of iconItems; track item) {
        <button mat-menu-item [disabled]="item.disabled">
          <mat-icon>{{ item.icon }}</mat-icon>
          {{ item.text }}
        </button>
      }
    </mat-menu>
  </div>
  <div class="demo-menu-section">
    <p>Position y: above, overlapTrigger: true</p>
    <mat-toolbar>
      <button matIconButton [mat-menu-trigger-for]="posYMenuOverlay">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu yPosition="above" [overlapTrigger]="true" #posYMenuOverlay="matMenu">
      @for (item of items; track item) {
        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
      }
    </mat-menu>
  </div>
  <div class="demo-menu-section">
    <p>disabledInteractive (should not open)</p>
    <mat-toolbar>
      <button
        disabled
        [disabledInteractive]="true"
        matIconButton
        [mat-menu-trigger-for]="disabledInteractiveMenu"
      >
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu #disabledInteractiveMenu="matMenu">
      @for (item of items; track item) {
        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
      }
    </mat-menu>
  </div>
  <div class="demo-menu-section">
    <p>vanilla button disabled binding</p>
    <mat-toolbar>
      <button [disabled]="true" [mat-menu-trigger-for]="disabledInteractiveMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-toolbar>

    <mat-menu #disabledInteractiveMenu="matMenu">
      @for (item of items; track item) {
        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
      }
    </mat-menu>
  </div>
</div>

<div class="demo-context-menu-area" [matContextMenuTriggerFor]="contextMenu">
  Right click here to trigger a context menu
</div>

<mat-menu #contextMenu>
  <button mat-menu-item>
    <mat-icon>content_cut</mat-icon>
    Cut
  </button>
  <button mat-menu-item>
    <mat-icon>content_copy</mat-icon>
    Copy
  </button>
  <button mat-menu-item>
    <mat-icon>content_paste</mat-icon>
    Paste
  </button>
  <button mat-menu-item>
    <mat-icon>print</mat-icon>
    Print
  </button>
</mat-menu>

<div style="height: 500px">
  <!-- Makes the page scrollable for easier testing. -->
</div>