Listbox, Select, Multiselect ve Autocomplete kalıpları tarafından kullanılan temel bir yönergedir. Çoğu açılır menü ihtiyacı için bunun yerine bu belgelendirilmiş kalıpları kullanın.
Şu durumlarda listbox'ı doğrudan kullanmayı düşünün:
Özel seçim bileşenleri oluşturma - Belirli davranışa sahip özelleştirilmiş arayüzler oluşturma
Görünür seçim listeleri - Seçilebilir öğeleri doğrudan sayfada gösterme (açılır menülerde değil)
Özel entegrasyon kalıpları - Benzersiz açılır pencere veya yerleşim gereksinimleriyle entegrasyon
Listbox'tan kaçının:
Navigasyon menüleri gerektiğinde - Eylemler ve komutlar için Menu yönergesini kullanın
Uygulamaların bazen bir açılır menüde gizlenmiş yerine doğrudan sayfada görünen seçilebilir listelere ihtiyacı vardır. Bağımsız bir listbox, bu görünen liste arayüzleri için klavye navigasyonu ve seçim sağlar.
app.ts
import {Listbox, Option} from '@angular/aria/listbox';import {Component} from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.html', styleUrl: './app.css', imports: [Listbox, Option],})export class App { /** The options available in the listbox. */ options = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7', 'Option 8', ];}
value model sinyali seçili öğelere iki yönlü bağlama sağlar. selectionMode="explicit" ile kullanıcılar seçenekleri seçmek için Boşluk veya Enter'a basar. Listbox'ı combobox ve katman konumlandırmasıyla birleştiren açılır menü kalıpları için Select kalıbına bakın.
Listeler bazen yatay olarak daha iyi çalışır, örneğin araç çubuğu benzeri arayüzler veya sekme tarzı seçimler. orientation niteliği hem yerleşimi hem de klavye navigasyon yönünü değiştirir.
app.ts
import {Listbox, Option} from '@angular/aria/listbox';import {Component} from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.html', styleUrl: './app.css', imports: [Listbox, Option],})export class App { /** The options available in the listbox. */ amenities = ['Washer / Dryer', 'Ramp access', 'Garden', 'Cats OK', 'Dogs OK', 'Smoke-free'];}
orientation="horizontal" ile yukarı ve aşağı ok tuşları yerine sol ve sağ ok tuşları seçenekler arasında gezinir. Listbox, navigasyon yönünü tersine çevirerek sağdan sola (RTL) dilleri otomatik olarak işler.
Listbox, öğelerin ne zaman seçileceğini kontrol eden iki seçim modunu destekler.
'follow' modu odaklanan öğeyi otomatik olarak seçer, seçim sık değiştiğinde daha hızlı etkileşim sağlar. 'explicit' modu, gezinirken kazara değişiklikleri önlemek için seçimi onaylamak için Boşluk veya Enter gerektirir. Açılır menü kalıpları genellikle tek seçim için 'follow' modunu kullanır.
Angular Aria, listbox bileşenlerini test etmek için bileşen harness'leri sağlar.
Bir bileşen testinde harness'lerin nasıl kullanılacağına dair bir örnek aşağıdadır:
import {ComponentFixture, TestBed} from '@angular/core/testing';import {HarnessLoader} from '@angular/cdk/testing';import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';import {ListboxHarness} from '@angular/aria/listbox/testing';import {MyListboxComponent} from './my-listbox'; // Bileşeninizdescribe('MyListboxComponent', () => { let fixture:ComponentFixture<MyListboxComponent>; let loader:HarnessLoader; beforeEach(async () => {TestBed.configureTestingModule({ imports: [MyListboxComponent], }); fixture =TestBed.createComponent(MyListboxComponent); await fixture.whenStable(); loader =TestbedHarnessEnvironment.loader(fixture); }); it('should allow selecting options', async () => { const listbox = await loader.getHarness(ListboxHarness); // Listbox özelliklerini doğrula expect(await listbox.isMulti()).toBe(true); // Tüm seçenekleri al const options = await listbox.getOptions(); expect(options.length).toBe(2); // Bir seçeneğe tıkla await options[0].click(); // Seçeneğin seçili olduğunu doğrula expect(await options[0].isSelected()).toBe(true); // Seçenekleri metne göre filtrele const bananaOption = await listbox.getOptions({text: 'Banana'}); expect(bananaOption.length).toBe(1); });});
Listbox, şu belgelendirilmiş açılır menü kalıpları tarafından kullanılır:
Select - Salt okunur combobox + listbox kullanan tek seçimli açılır menü kalıbı
Multiselect - Salt okunur combobox + multi ile listbox kullanan çoklu seçimli açılır menü kalıbı
Autocomplete - Combobox + listbox kullanan filtrelenebilir açılır menü kalıbı
Tetikleyici, açılır pencere ve katman konumlandırmasıyla eksiksiz açılır menü kalıpları için, listbox'ı tek başına kullanmak yerine bu kalıp rehberlerine bakın.