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'ler

Menü öğeleri için kapsayıcı yönerge.

Girişler

Property Type Default Description
disabled boolean false Menüdeki tüm öğeleri devre dışı bırakır
wrap boolean true Klavye navigasyonunun kenarlarda sarılıp sarılmadığı
softDisabled boolean true true olduğunda, devre dışı öğeler odaklanabilir ancak etkileşimli değildir

Yöntemler

Method Parameters Description
close none Menüyü kapatır

Birden fazla menü için yatay kapsayıcı.

Girişler

Property Type Default Description
disabled boolean false Tüm menü çubuğunu devre dışı bırakır
wrap boolean true Klavye navigasyonunun kenarlarda sarılıp sarılmadığı
softDisabled boolean true true olduğunda, devre dışı öğeler odaklanabilir ancak etkileşimli değildir

Bir menü içindeki bireysel bir öğe.

Girişler

Property Type Default Description
value any — Zorunlu. Bu öğenin değeri
role 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' 'menuitem' Menü öğesi için ARIA rolü
disabled boolean false Bu menü öğesini devre dışı bırakır
submenu Menu — Bir alt menüye referans
searchTerm string '' Yazarak arama için arama terimi (iki yönlü bağlama destekler)

Sinyaller

Property Type Description
active Signal<boolean> Öğenin şu anda odakta olup olmadığı
expanded Signal<boolean> Alt menünün genişletilmiş olup olmadığı
hasPopup Signal<boolean> Öğenin ilişkili bir alt menüsü olup olmadığı

NOTE: MenuItem genel yöntemler sunmaz. Alt menüleri menü öğeleriyle ilişkilendirmek için submenu girişini kullanın.

Bir menüyü açan buton veya eleman.

Girişler

Property Type Default Description
menu Menu — Zorunlu. Tetiklenecek menü
disabled boolean false Tetikleyiciyi devre dışı bırakır
softDisabled boolean true true olduğunda, devre dışı tetikleyici odaklanabilir

Sinyaller

Property Type Description
expanded Signal<boolean> Menünün şu anda açık olup olmadığı
hasPopup Signal<boolean> Tetikleyicinin ilişkili bir menüsü olup olmadığı

Yöntemler

Method Parameters Description
open none Menüyü açar
close none Menüyü kapatır
toggle none Menüyü aç/kapa durumunu değiştirir