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, belgelenen şu açılır liste desenleri tarafından kullanılır:
Select - Salt okunur combobox + listbox kullanan tek seçimli açılır liste deseni
Multiselect - multi ile salt okunur combobox + listbox kullanan çoklu seçim deseni
Autocomplete - Combobox + listbox kullanan filtrelenebilir açılır liste deseni
Tetikleyici, popup ve overlay konumlandırmayı içeren eksiksiz açılır liste desenleri için listbox'ı tek başına kullanmak yerine ilgili desen kılavuzlarına bakın.