Katkıda Bulun
Detaylı Rehberler
Angular Aria

Grid

Genel Bakış

Bir grid, kullanıcıların yönlü ok tuşları, Home, End ve Page Up/Down kullanarak iki boyutlu veriler veya etkileşimli elemanlar arasında gezinmesini sağlar. Gridler veri tabloları, takvimler, hesap tabloları ve ilişkili etkileşimli elemanları gruplayan yerleşim kalıpları için çalışır.

Kullanım

Gridler, satırlar ve sütunlar halinde düzenlenmiş ve kullanıcıların birden fazla yönde klavye navigasyonuna ihtiyaç duydukları veriler veya etkileşimli elemanlar için iyi çalışır.

Grid kullanın:

  • Düzenlenebilir veya seçilebilir hücrelere sahip etkileşimli veri tabloları oluştururken
  • Takvim veya tarih seçiciler oluştururken
  • Hesap tablosu benzeri arayüzler uygularken
  • Bir sayfadaki sekme duraklarını azaltmak için etkileşimli elemanları (butonlar, onay kutuları) gruplarken
  • İki boyutlu klavye navigasyonu gerektiren arayüzler oluştururken

Gridlerden kaçının:

  • Basit salt okunur tablolar gösterirken (bunun yerine semantik HTML <table> kullanın)
  • Tek sütunlu listeler gösterirken (bunun yerine Listbox kullanın)
  • Hiyerarşik veri gösterirken (bunun yerine Tree kullanın)
  • Tablo yerleşimi olmayan formlar oluştururken (standart form kontrolleri kullanın)

Özellikler

  • İki boyutlu navigasyon - Ok tuşları tüm yönlerde hücreler arasında hareket eder
  • Odak modları - Dolaşan tabindex veya activedescendant odak stratejileri arasında seçim yapın
  • Seçim desteği - Tekli veya çoklu seçim modlarıyla isteğe bağlı hücre seçimi
  • Sarma davranışı - Grid kenarlarında navigasyonun nasıl sarılacağını yapılandırın (sürekli, döngü veya sarmasız)
  • Aralık seçimi - Değiştirici tuşlar veya sürüklemeyle birden fazla hücre seçin
  • Devre dışı durumlar - Tüm gridi veya bireysel hücreleri devre dışı bırakın
  • RTL desteği - Otomatik sağdan sola dil navigasyonu

Örnekler

Veri Tablosu Gridi

Kullanıcıların ok tuşlarıyla hücreler arasında gezinmesi gereken etkileşimli tablolar için grid kullanın. Bu örnek, klavye navigasyonlu temel bir veri tablosunu gösterir.

ngGrid yönergesini tablo elemanına, ngGridRow'u her satıra ve ngGridCell'i her hücreye uygulayın.

Takvim Gridi

Takvimler, gridler için yaygın bir kullanım durumudur. Bu örnek, kullanıcıların ok tuşlarıyla tarihler arasında gezdiği bir ay görünümünü gösterir.

Kullanıcılar bir hücreye odaklandığında Enter veya Boşluk tuşuna basarak bir tarihi etkinleştirebilir.

Yerleşim Gridi

Etkileşimli elemanları gruplamak ve sekme duraklarını azaltmak için yerleşim gridi kullanın. Bu örnek, hap butonlarından oluşan bir gridi gösterir.

Her buton arasında sekme tuşuna basmak yerine, kullanıcılar ok tuşlarıyla gezinir ve yalnızca bir buton sekme odağını alır.

Seçim ve Odak Modları

[enableSelection]="true" ile seçimi etkinleştirin ve odak ile seçimin nasıl etkileşeceğini yapılandırın.

<table
  ngGrid
  [enableSelection]="true"
  [selectionMode]="'explicit'"
  [multi]="true"
  [focusMode]="'roving'"
>
  <tr ngGridRow>
    <td ngGridCell>Cell 1</td>
    <td ngGridCell>Cell 2</td>
  </tr>
</table>

Seçim modları:

  • follow: Odaklanan hücre otomatik olarak seçilir
  • explicit: Kullanıcılar hücreleri Boşluk veya tıklama ile seçer

Odak modları:

  • roving: Odak, tabindex kullanılarak hücrelere hareket eder (basit gridler için daha iyidir)
  • activedescendant: Odak grid kapsayıcısında kalır, aria-activedescendant aktif hücreyi gösterir (sanal kaydırma için daha iyidir)

Test Etme

Angular Aria, grid 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 {GridHarness} from '@angular/aria/grid/testing';
import {MyGridComponent} from './my-grid'; // Bileşeniniz

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

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

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

  it('should read cell values and focus cells', async () => {
    const grid = await loader.getHarness(GridHarness);

    // Satırlara göre düzenlenmiş 2 boyutlu bir dizide tüm hücre metinlerini al
    const cellTexts = await grid.getCellTextByIndex();
    expect(cellTexts).toEqual([
      ['Cell 1.1', 'Cell 1.2'],
      ['Cell 2.1', 'Cell 2.2'],
    ]);

    // Metnine göre belirli bir hücreyi al
    const cells = await grid.getCells({text: 'Cell 1.1'});
    expect(cells.length).toBe(1);
    const cell = cells[0];

    // Hücre durumunu doğrula
    expect(await cell.isSelected()).toBe(true);
    expect(await cell.isActive()).toBe(true);

    // Hücreye odaklan
    await cell.focus();
    expect(await cell.isFocused()).toBe(true);
  });
});

API referansı

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