Katkıda Bulun
Detaylı Rehberler
Angular Aria

Combobox

Genel Bakış

Bir tetikleyici eleman (metin girişi, buton veya div gibi) ile bir açılır pencereyi koordine eden, otomatik tamamlama, select ve multiselect kalıpları için temel yönerge sağlayan yönerge.

Kullanım

Combobox, etkileşimli bir tetikleyici eleman (metin girişi, buton veya div gibi) ile bir açılır pencereyi koordine eden temel yönergedir. Otomatik tamamlama, select ve multiselect kalıpları için temel oluşturur. Şu durumlarda combobox'ı doğrudan kullanmayı düşünün:

  • Özel otomatik tamamlama kalıpları oluşturma - Özelleştirilmiş filtreleme veya öneri davranışı oluşturma
  • Özel seçim bileşenleri oluşturma - Benzersiz gereksinimleri olan açılır menüler geliştirme
  • Girişi açılır pencereyle koordine etme - Metin girişini listbox, tree veya dialog içeriğiyle eşleştirme
  • Özel filtreleme uygulama - Eşleşen seçenekleri kullanıcı tarafında filtreleme ve düzenleme

Bunun yerine belgelendirilmiş kalıpları kullanın:

  • Filtrelemeli standart otomatik tamamlama gerektiğinde - Kullanıma hazır örnekler için Autocomplete kalıbına bakın
  • Tek seçimli açılır menüler gerektiğinde - Eksiksiz açılır menü uygulaması için Select kalıbına bakın
  • Çoklu seçimli açılır menüler gerektiğinde - Kompakt görüntüyle çoklu seçim için Multiselect kalıbına bakın

NOTE: Autocomplete, Select ve Multiselect rehberleri, bu yönergeyi belirli kullanım durumları için Listbox ile birleştiren belgelendirilmiş kalıpları gösterir.

Özellikler

Angular'ın combobox'ı, tam erişilebilir bir giriş-açılır pencere koordinasyon sistemi sağlar:

  • Açılır Pencereli Tetikleyici Eleman - Tetikleyici elemanı açılır pencere içeriğiyle koordine eder
  • Esnek Koordinasyon - Standart yerleşimlerle (listbox, tree, grid veya dialog) sorunsuz entegre olur
  • Klavye Navigasyonu - Ok tuşları, Enter, Escape işlemesi
  • Ekran Okuyucu Desteği - role="combobox" ve aria-expanded dahil yerleşik ARIA nitelikleri
  • Açılır Pencere Yönetimi - Kullanıcı etkileşimine dayalı otomatik göster/gizle
  • Sinyal Tabanlı Reaktivite - Angular sinyalleri kullanan reaktif durum yönetimi

Örnekler

Otomatik Tamamlama

Kullanıcılar yazarken seçenekleri filtreleyen ve öneren, bir listeden değer bulmalarına ve seçmelerine yardımcı olan erişilebilir bir giriş alanı.

Filtreleme, seçenekler listesini reaktif olarak filtreleyen bir sinyali güncelleyerek kullanıcı tarafında yönetilir. Kullanıcılar ok tuşlarıyla gezinir ve Enter veya tıklama ile seçer. Bu, özel seçim mantığı için tam kontrol ve maksimum esneklik sağlar. Eksiksiz filtreleme kalıpları ve örnekleri için Autocomplete rehberine bakın.

Salt Okunur Modu

Tek seçimli açılır menüler oluşturmak için klavye navigasyonu ve ekran okuyucu desteği ile salt okunur combobox'ı listbox ile birleştiren bir kalıp.

Metin girişi olmadan bir açılır menü tetikleme, ana tetikleyici olarak bir buton kullanılarak veya giriş tetikleyicisine yerel HTML readonly niteliği uygulanarak gerçekleştirilebilir. Açılır pencere tıklama veya ok tuşlarıyla açılır.

Bu yapılandırma, Select ve Multiselect kalıpları için temeli sağlar. Tetikleyiciler ve katman konumlandırmasıyla eksiksiz açılır menü uygulamaları için bu rehberlere bakın.

Datepicker grid

Combobox, erişilebilir datepicker'lar oluşturmak için iki boyutlu bir grid ile koordine olabilir. Kullanıcılar takvim grid tablosundaki tarihler arasında yönlü ok tuşlarıyla gezinir ve seçimi tıklama, Enter veya Boşluk tuşu ile onaylar.

Dialog Açılır Penceresi

Dialog açılır pencereleri, combobox tetikleyicisini standart dialog yerleşimleri ve odak yakalayıcılarla (CDK'nın cdkTrapFocus'u gibi) birleştirir. Katman modal davranış veya arka plan etkileşimi gerektirdiğinde dialog açılır pencerelerini kullanın.

Test Etme

Angular Aria, combobox bileşenlerini test etmek için bir ComboboxHarness sağlar. İşte harness'ı bir bileşen testinde nasıl kullanacağınıza dair bir örnek:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {ComboboxHarness} from '@angular/aria/combobox/testing';
import {MyComboboxComponent} from './my-combobox'; // Bileşeniniz

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

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

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

  it('should allow opening and closing the popup', async () => {
    const combobox = await loader.getHarness(ComboboxHarness);

    // Başlangıç durumunu doğrula
    expect(await combobox.isOpen()).toBe(false);

    // Açılır pencereyi aç
    await combobox.open();
    expect(await combobox.isOpen()).toBe(true);

    // Açılır pencereyi kapat
    await combobox.close();
    expect(await combobox.isOpen()).toBe(false);
  });
});

API referansı

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

İlgili desenler ve direktifler

Combobox, belgelenen şu desenler için temel direktiftir:

  • Autocomplete - Filtreleme ve öneri deseni (girdi yazımını seçenek listesiyle eşgüdümler)
  • Select - Tek seçimli açılır liste deseni (düzenlenemeyen buton tetikleyicilere doğrudan uygulanır)
  • Multiselect - Çoklu seçim deseni (multi etkinleştirilmiş Listbox ile düzenlenemeyen tetikleyicilere uygulanır)

Combobox tipik olarak şunlarla birlikte kullanılır:

  • Listbox - En yaygın popup içeriği
  • Tree - Hiyerarşik popup içeriği (örnekler için Tree kılavuzuna bakın)