Katkıda Bulun
Detaylı Rehberler
Angular Aria

Menu

Genel Bakış

Bir menü, kullanıcılara eylemler veya seçenekler listesi sunar, tipik olarak bir buton tıklaması veya sağ tıklama yanıtı olarak görünür. Menüler ok tuşlarıyla klavye navigasyonunu, alt menüleri, onay kutularını, radyo butonlarını ve devre dışı öğeleri destekler.

Kullanım

Menüler, kullanıcıların seçebileceği eylem veya komut listeleri sunmak için iyi çalışır.

Menü kullanın:

  • Uygulama komut menüleri oluştururken (Dosya, Düzenle, Görüntüle)
  • Bağlam menüleri oluştururken (sağ tıklama eylemleri)
  • Açılır eylem listeleri gösterirken
  • Araç çubuğu açılır menüleri uygularken
  • Ayarları veya seçenekleri düzenlerken

Menülerden kaçının:

  • Site navigasyonu oluştururken (bunun yerine navigasyon yer işaretlerini kullanın)
  • Form select'leri oluştururken (bunun yerine Select bileşenini kullanın)
  • İçerik panelleri arasında geçiş yaparken (bunun yerine Tabs kullanın)
  • Daraltılabilir içerik gösterirken (bunun yerine Accordion kullanın)

Özellikler

  • Klavye navigasyonu - Ok tuşları, Home/End ve karakter arama ile verimli navigasyon
  • Alt menüler - Otomatik konumlandırma ile iç içe menü desteği
  • Menü türleri - Bağımsız menüler, tetikleyicili menüler ve menü çubukları
  • Onay kutuları ve radyolar - Değiştirme ve seçim menü öğeleri
  • Devre dışı öğeler - Odak yönetimiyle yumuşak veya sert devre dışı durumlar
  • Otomatik kapanma davranışı - Seçimde yapılandırılabilir kapanma
  • RTL desteği - Sağdan sola dil navigasyonu

Örnekler

Tetikleyicili menü

Bir tetikleyici butonla bir menüyü eşleştirerek açılır menü oluşturun. Tetikleyici menüyü açar ve kapatır.

Kullanıcı bir öğe seçtiğinde veya Escape'e bastığında menü otomatik olarak kapanır.

Bağlam menüsü

Bağlam menüleri, kullanıcılar bir elemana sağ tıkladığında imleç konumunda görünür.

Menüyü contextmenu olay koordinatlarını kullanarak konumlandırın.

Bağımsız menü

Bağımsız menü bir tetikleyici gerektirmez ve arayüzde görünür kalır.

Bağımsız menüler her zaman görünen eylem listeleri veya navigasyon için iyi çalışır.

Devre dışı menü öğeleri

disabled girişini kullanarak belirli menü öğelerini devre dışı bırakın. softDisabled ile odak davranışını kontrol edin.

[softDisabled]="true" olduğunda, devre dışı öğeler odak alabilir ancak etkinleştirilemez. [softDisabled]="false" olduğunda, devre dışı öğeler klavye navigasyonu sırasında atlanır.

Test Etme

Angular Aria, menü bileşenlerini test etmek için bileşen harness'leri sağlar. Harness'lerin bir bileşen testinde nasıl kullanılacağına dair bir örnek:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {MenuHarness, MenuItemHarness} from '@angular/aria/menu/testing';
import {MyMenuComponent} from './my-menu'; // Bileşeniniz

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

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

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

  it('should open menu and click item', async () => {
    // Menü harness'ini tetikleyici metnine göre yükleyin
    const menu = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));

    // Başlangıç durumunu doğrulayın
    expect(await menu.isOpen()).toBe(false);

    // Menüyü açın
    await menu.open();
    expect(await menu.isOpen()).toBe(true);

    // Öğeleri alın
    const items = await menu.getItems();
    expect(items.length).toBe(3);
    expect(await items[0].getText()).toBe('Item 1');

    // İlk öğeye tıklayın
    await items[0].click();

    // Menü, seçimden sonra kapanmalıdır (uygulamanıza bağlı olarak)
    expect(await menu.isOpen()).toBe(false);
  });

  it('should interact with submenus', async () => {
    const menu = await loader.getHarness(MenuHarness.with({triggerText: 'Open Menu'}));
    await menu.open();

    // Bir alt menüyü tetikleyen öğeyi alın
    const subItem = await loader.getHarness(MenuItemHarness.with({text: 'Submenu'}));
    expect(await subItem.hasSubmenu()).toBe(true);

    // Alt menüyü açın
    await subItem.click();
    const submenu = await subItem.getSubmenu();
    expect(submenu).toBeTruthy();
    expect(await submenu!.isOpen()).toBe(true);

    // Alt menü öğeleriyle etkileşim kurun
    const subItems = await submenu!.getItems();
    expect(subItems.length).toBe(1);
  });
});

API referansı

Ayrıntılı API belgeleri için aşağıdaki API referanslarını inceleyin: