Katkıda Bulun
Detaylı Rehberler
Angular Aria

Tabs

Genel Bakış

Sekmeler, aynı anda yalnızca bir panelin görünebildiği katmanlı içerik bölümleri gösterir. Kullanıcılar sekme butonlarına tıklayarak veya sekme listesinde gezinmek için ok tuşları kullanarak paneller arasında geçiş yapar.

Kullanım

Sekmeler, kullanıcıların farklı görünümler veya kategoriler arasında geçiş yaptığı, ilişkili içeriği farklı bölümlere düzenlemek için iyi çalışır.

Sekmeleri kullanın:

  • İlişkili içeriği farklı bölümlere düzenlerken
  • Birden fazla kategoriye sahip ayar panelleri oluştururken
  • Birden fazla konuya sahip dokümantasyon oluştururken
  • Farklı görünümlere sahip kontrol panelleri uygularken
  • Kullanıcıların bağlam değiştirmesi gerektiği içeriği gösterirken

Sekmelerden kaçının:

  • Sıralı formlar veya sihirbazlar oluştururken (bir adım kalıbı kullanın)
  • Sayfalar arasında gezinirken (yönlendirici navigasyonu kullanın)
  • Tek içerik bölümleri gösterirken (sekmelere gerek yok)
  • 7-8'den fazla sekme olduğunda (farklı bir yerleşim düşünün)

Özellikler

  • Seçim modları - Sekmeler odaklandığında otomatik olarak etkinleşir veya manuel etkinleştirme gerektirir
  • Klavye navigasyonu - Ok tuşları, Home ve End ile verimli sekme navigasyonu
  • Yön - Yatay veya dikey sekme listesi yerleşimi
  • Tembel içerik - Sekme panelleri yalnızca ilk etkinleştirildiğinde oluşturulur
  • Devre dışı sekmeler - Odak yönetimiyle bireysel sekmeleri devre dışı bırakın
  • Odak modları - Dolaşan tabindex veya activedescendant odak stratejileri
  • RTL desteği - Sağdan sola dil navigasyonu

Örnekler

Seçim odağı takip eder

Seçim odağı takip ettiğinde, ok tuşlarıyla gezindikçe sekmeler anında etkinleşir. Bu anında geri bildirim sağlar ve hafif içerik için iyi çalışır.

Bu davranışı etkinleştirmek için sekme listesinde [selectionMode]="'follow'" ayarlayın.

Manuel etkinleştirme

Manuel etkinleştirmede, ok tuşları seçili sekmeyi değiştirmeden sekmeler arasında odak taşır. Kullanıcılar odaklanan sekmeyi etkinleştirmek için Boşluk veya Enter'a basar.

Gereksiz render'ı önlemek için ağır içerik panellerinde [selectionMode]="'explicit'" kullanın.

Dikey sekmeler

Ayar panelleri veya navigasyon kenar çubukları gibi arayüzler için sekmeleri dikey olarak düzenleyin.

Sekme listesinde [orientation]="'vertical'" ayarlayın. Navigasyon Yukarı/Aşağı ok tuşlarına değişir.

Tembel içerik render'ı

Sekme panellerinin ilk gösterilene kadar render edilmesini ertelemek için bir ng-template üzerinde ngTabContent yönergesini kullanın.

<div ngTabs>
  <ul ngTabList [(selectedTab)]="selectedTab">
    <li ngTab value="tab1">Tab 1</li>
    <li ngTab value="tab2">Tab 2</li>
  </ul>

  <div ngTabPanel value="tab1">
    <ng-template ngTabContent>
      <!-- Bu içerik yalnızca Sekme 1 ilk gösterildiğinde render edilir -->
      <app-heavy-component />
    </ng-template>
  </div>

  <div ngTabPanel value="tab2">
    <ng-template ngTabContent>
      <!-- Bu içerik yalnızca Sekme 2 ilk gösterildiğinde render edilir -->
      <app-another-component />
    </ng-template>
  </div>
</div>

Varsayılan olarak, panel gizlendikten sonra içerik DOM'da kalır. Panel devre dışı bırakıldığında içeriği DOM'dan kaldırmak için [preserveContent]="false" ayarlayın.

Devre dışı sekmeler

Kullanıcı etkileşimini engellemek için belirli sekmeleri devre dışı bırakın. Devre dışı sekmelerin klavye odağı alıp alamayacağını kontrol edin.

Sekme listesinde [softDisabled]="true" olduğunda, devre dışı sekmeler odak alabilir ancak etkinleştirilemez. [softDisabled]="false" olduğunda, devre dışı sekmeler klavye navigasyonu sırasında atlanır.

Test etme

Angular Aria, sekme bileşenlerini test etmek için bileşen harness'leri sağlar. İşte bir bileşen testinde harness'lerin nasıl kullanılacağına dair bir örnek:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {ComponentHarness, HarnessLoader} from '@angular/cdk/testing';
import {TabsHarness} from '@angular/aria/tabs/testing';
import {MyTabsComponent} from './my-tabs'; // Sizin bileşeniniz

// Sekme paneli içindeki içeriği sorgulamaya yardımcı olan basit bir harness
class TestContentHarness extends ComponentHarness {
  static hostSelector = '.test-content';
  async getText(): Promise<string> {
    return (await this.host()).text();
  }
}

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

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

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

  it('should switch tabs and scope panel queries', async () => {
    const tabs = await loader.getHarness(TabsHarness);

    // Tüm sekmeleri al
    const tabItems = await tabs.getTabs();
    expect(tabItems.length).toBe(3);

    // İlk seçimi doğrula
    expect(await tabItems[0].isSelected()).toBe(true);
    expect(await tabItems[1].isSelected()).toBe(false);

    // Etkin sekme paneli içindeki içeriği sorgula
    // TabHarness, sorguları otomatik olarak ilişkili paneliyle sınırlandırır
    const content = await tabItems[0].getHarness(TestContentHarness);
    expect(await content.getText()).toBe('Content 1');

    // İkinci sekmeye geç
    await tabItems[1].select();

    // Seçimin güncellendiğini doğrula
    expect(await tabItems[0].isSelected()).toBe(false);
    expect(await tabItems[1].isSelected()).toBe(true);
  });
});

API referansı

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