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'ler

Tabs

Sekme listeleri ve panelleri koordine eden kapsayıcı yönerge.

Bu yönergenin girişi veya çıktısı yoktur. ngTabList, ngTab ve ngTabPanel yönergeleri için kök kapsayıcı görevi görür.

TabList

Seçim ve klavye navigasyonunu yöneten sekme butonları için kapsayıcı.

Girişler

Property Type Default Description
orientation 'horizontal' | 'vertical' 'horizontal' Sekme listesi yerleşim yönü
wrap boolean true Klavye navigasyonunun son sekmeden ilk sekmeye sarılıp sarılmadığı
softDisabled boolean true true olduğunda, devre dışı sekmeler odaklanabilir ancak etkinleştirilemez
selectionMode 'follow' | 'explicit' 'follow' Sekmelerin odaklandığında mı yoksa açık etkinleştirme mi gerektirdiği
focusMode 'roving' | 'activedescendant' 'roving' Odak yönetimi stratejisi
selectedTab any — Şu anda seçili sekmenin değeri (iki yönlü bağlama destekler)

Tab

Bireysel bir sekme butonu.

Girişler

Property Type Default Description
value any — Zorunlu. Bu sekme için benzersiz değer
disabled boolean false Bu sekmeyi devre dışı bırakır

Sinyaller

Property Type Description
selected Signal<boolean> Sekmenin şu anda seçili olup olmadığı
active Signal<boolean> Sekmenin şu anda odakta olup olmadığı

TabPanel

Bir sekmeyle ilişkili içerik paneli.

Girişler

Property Type Default Description
value any — Zorunlu. İlişkili sekmenin value değeri ile eşleşmelidir
preserveContent boolean true Devre dışı bırakılmadan sonra panel içeriğinin DOM'da tutulup tutulmayacağı

Sinyaller

Property Type Description
visible Signal<boolean> Panelin şu anda görünür olup olmadığı

TabContent

Sekme panel içeriğini tembel render etmek için yapısal yönerge.

Bu yönergenin girişi, çıktısı veya yöntemi yoktur. Bir sekme paneli içindeki ng-template elemanına uygulayın:

<div ngTabPanel value="tab1">
  <ng-template ngTabContent>
    <!-- Buradaki içerik tembel olarak render edilir -->
  </ng-template>
</div>