詳細ガイド
Angular Aria

メニューバー

概要

メニューバーは、アプリケーションメニューへの永続的なアクセスを提供する水平ナビゲーションバーです。メニューバーは、ファイル、編集、表示などの論理的なカテゴリーにコマンドを整理し、ユーザーがキーボードやマウスの操作を通じてアプリケーションの機能を発見し、実行するのに役立ちます。

使い方

メニューバーは、アプリケーションのコマンドを永続的で発見しやすいナビゲーションに整理するのに適しています。

メニューバーを使用する場合:

  • アプリケーションのコマンドバー(ファイル、編集、表示、挿入、フォーマットなど)を構築する場合
  • インターフェース全体で表示され続ける永続的なナビゲーションを作成する場合
  • コマンドを論理的なトップレベルのカテゴリーに整理する場合
  • キーボードサポート付きの水平メニューナビゲーションが必要な場合
  • デスクトップスタイルのアプリケーションインターフェースを構築する場合

メニューバーを避けるべき場合:

  • 個々のアクションのためのドロップダウンメニューを構築する場合(代わりにトリガー付きMenuを使用してください)
  • コンテキストメニューを作成する場合(Menuガイドパターンを使用してください)
  • シンプルなスタンドアロンのアクションリストの場合(代わりにMenuを使用してください)
  • 水平方向のスペースが限られているモバイルインターフェースの場合
  • ナビゲーションがサイドバーまたはヘッダーのナビゲーションパターンに属する場合

機能

  • 水平ナビゲーション - 左右の矢印キーでトップレベルのカテゴリー間を移動
  • 永続的な可視性 - 常に表示され、モーダルでも非表示でもない
  • ホバーで開く - 最初のキーボードまたはクリック操作の後、ホバーでサブメニューが開く
  • ネストされたサブメニュー - 複数レベルのメニュー深度をサポート
  • キーボードナビゲーション - 矢印キー、Enter/Space、Escape、および先行入力サーチ
  • 無効状態 - メニューバー全体または個々の項目を無効化
  • RTLサポート - 右から左へ記述する言語のナビゲーションを自動でサポート

例

基本的なメニューバー

メニューバーは、トップレベルのカテゴリーに整理されたアプリケーションコマンドへの永続的なアクセスを提供します。ユーザーは左/右矢印キーでカテゴリー間を移動し、Enterキーまたは下矢印キーでメニューを開きます。

右矢印キーを押すと、File、Edit、Viewの間を移動します。Enterキーまたは下矢印キーを押すとメニューが開き、上/下矢印キーでサブメニュー項目を操作できます。

無効化されたメニューバーアイテム

特定のメニュー項目またはメニューバー全体を無効にして、インタラクションを防ぎます。softDisabled入力で、無効化された項目がキーボードフォーカスを受け取れるかどうかを制御します。

メニューバーで[softDisabled]="true"の場合、無効化された項目はフォーカスを受け取れますが、アクティブにはできません。[softDisabled]="false"の場合、無効化された項目はキーボードナビゲーション中にスキップされます。

RTLサポート

メニューバーは、右から左へ記述する言語（RTL）に自動的に適応します。矢印キーによるナビゲーションの方向は逆になり、サブメニューは左側に配置されます。

dir="rtl"属性はRTLモードを有効にします。左矢印キーは右に、右矢印キーは左に移動し、RTL言語のユーザーにとって自然なナビゲーションを維持します。

Testing

Angular Aria provides component harnesses for testing menubar components. Here is an example of how to use the harnesses in a component test:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {MenuHarness} from '@angular/aria/menu/testing';
import {MyMenubarComponent} from './my-menubar'; // Your component

describe('MyMenubarComponent', () => {
  let fixture: ComponentFixture<MyMenubarComponent>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [MyMenubarComponent],
    });

    fixture = TestBed.createComponent(MyMenubarComponent);
    await fixture.whenStable();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should interact with menubar items', async () => {
    // Load the menubar harness (which is a MenuHarness with selector '[ngMenuBar]')
    const menubar = await loader.getHarness(MenuHarness.with({selector: '[ngMenuBar]'}));

    // Menubars are persistent and always "open"
    expect(await menubar.isOpen()).toBe(true);
    expect(await menubar.isMenuBar()).toBe(true);

    // Get top-level items
    const items = await menubar.getItems();
    expect(items.length).toBe(2);
    expect(await items[0].getText()).toBe('File');
    expect(await items[1].getText()).toBe('Edit');

    // Click an item to open its dropdown menu
    await items[0].click();

    const fileMenu = await items[0].getSubmenu();
    expect(fileMenu).toBeTruthy();
    expect(await fileMenu!.isOpen()).toBe(true);
  });
});

APIリファレンス

詳細なAPIドキュメントについては、以下のAPIリファレンスを参照してください。