Katkıda Bulun
Detaylı Rehberler
Angular Aria

Accordion

Genel Bakış

Bir akordeon, ilgili içeriği genişletilebilir ve daraltılabilir bölümlere düzenleyerek sayfa kaydırmayı azaltır ve kullanıcıların ilgili bilgilere odaklanmasına yardımcı olur. Her bölümün bir tetikleyici butonu ve bir içerik paneli vardır. Bir tetikleyiciye tıklamak, ilişkili panelin görünürlüğünü değiştirir.

Kullanım

Akordeonlar, kullanıcıların genellikle aynı anda bir bölümü görüntülemeye ihtiyaç duydukları mantıksal gruplara içerik düzenleme için iyi çalışır.

Akordeon kullanin:

  • Birden fazla soru ve yanıt içeren SSS gösterimi
  • Uzun formları yönetilebilir bölümlere düzenleme
  • İçerik ağırlıklı sayfalarda kaydırmayı azaltma
  • İlgili bilgileri kademeli olarak açıklama

Akordeondan kacinin:

  • Navigasyon menüleri oluştururken (bunun yerine Menu bileşenini kullanın)
  • Sekmeli arayüzler oluştururken (bunun yerine Tabs bileşenini kullanın)
  • Tek bir daraltılabilir bölüm gösterirken (bunun yerine bir açıklama kalıbı kullanın)
  • Kullanıcıların aynı anda birden fazla bölümü görmesi gerektiğinde (farklı bir yerleşim düşünün)

Özellikler

  • Genişleme modları - Aynı anda bir veya birden fazla panelin açık olup olmayacağını kontrol edin
  • Klavye navigasyonu - Ok tuşları, Home ve End ile tetikleyiciler arasında gezinin
  • Tembel render - İçerik yalnızca bir panel ilk kez genişletildiğinde oluşturulur, ilk yükleme performansını iyileştirir
  • Devre dışı durumlar - Tüm grubu veya bireysel tetikleyicileri devre dışı bırakın
  • Odak yönetimi - Devre dışı bırakılan öğelerin klavye odağı alıp alamayacağını kontrol edin
  • Programatik kontrol - Bileşen kodunuzdan panelleri genişletin, daraltın veya değiştirin
  • RTL desteği - Sağdan sola diller için otomatik destek

Örnekler

Tekli genişleme modu

Aynı anda yalnızca bir panelin açık olmasına izin vermek için [multiExpandable]="false" ayarlayın. Yeni bir panel açmak, daha önce açık olan paneli otomatik olarak kapatır.

Bu mod, SSS'ler veya kullanıcıların aynı anda bir yanıta odaklanmasını istediğiniz durumlar için iyi çalışır.

Çoklu genişleme modu

Birden fazla panelin aynı anda açık olmasına izin vermek için [multiExpandable]="true" ayarlayın. Kullanıcılar diğerlerini kapatmadan ihtiyaç duyduğu kadar panel genişletebilir.

Bu mod, form bölümleri veya kullanıcıların birden fazla panel arasında içeriği karşılaştırması gerektiğinde kullanışlıdır.

NOTE: multiExpandable girdisi varsayılan olarak true'dur. Tek genişleme davranışı istiyorsanız açıkça false olarak ayarlayın.

Devre dışı akordeon öğeleri

disabled girdisini kullanarak belirli tetikleyicileri devre dışı bırakın. Devre dışı bırakılan öğelerin klavye navigasyonu sırasındaki davranışını akordeon grubundaki softDisabled girdisi ile kontrol edin.

[softDisabled]="true" olduğunda (varsayılan), devre dışı bırakılan öğeler odak alabilir ancak etkinleştirilemez. [softDisabled]="false" olduğunda, devre dışı bırakılan öğeler klavye navigasyonu sırasında tamamen atlanır.

Tembel içerik render etme

Panel ilk kez genişletilene kadar içerik render etmeyi ertelemek için bir ng-template üzerinde ngAccordionContent yönergesini kullanın. Bu, resimler, grafikler veya karmaşık bileşenler gibi ağır içerikli akordeonlar için performansı iyileştirir.

<div ngAccordionGroup>
  <div>
    <button ngAccordionTrigger [panel]="panel1">Trigger Text</button>
    <div ngAccordionPanel #panel1="ngAccordionPanel">
      <ng-template ngAccordionContent>
        <!-- Bu içerik yalnızca panel ilk açıldığında render edilir -->
        <img src="large-image.jpg" alt="Description" />
        <app-expensive-component />
      </ng-template>
    </div>
  </div>
</div>

Varsayılan olarak, panel daraltıldıktan sonra içerik DOM'da kalır. Panel kapatıldığında içeriği DOM'dan kaldırmak için [preserveContent]="false" ayarlayın.

Test etme

Angular Aria, akordeon bileşenlerini test etmek için bileşen harness'leri sağlar. İşte 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 {AccordionGroupHarness} from '@angular/aria/accordion/testing';
import {MyAccordionComponent} from './my-accordion'; // Sizin bileşeniniz

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

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

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

  it('should allow expanding panels', async () => {
    // Akordeon grubu harness'ini yükle
    const group = await loader.getHarness(AccordionGroupHarness);

    // Gruptaki tüm bireysel akordeonları (öğeleri) al
    const accordions = await group.getAccordions();
    expect(accordions.length).toBe(3);

    // Başlangıç durumunu doğrula (ilki genişletilmiş, diğerleri daraltılmış)
    expect(await accordions[0].isExpanded()).toBe(true);
    expect(await accordions[1].isExpanded()).toBe(false);

    // İkinci paneli genişlet
    await accordions[1].expand();

    // Güncellenmiş durumu doğrula
    expect(await accordions[1].isExpanded()).toBe(true);
    // multiExpandable false ise, ilki artık daraltılmış olmalı
    expect(await accordions[0].isExpanded()).toBe(false);
  });
});

API'ler

AccordionGroup

Bir grup akordeon öğesi için klavye navigasyonunu ve genişleme davranışını yöneten kapsayıcı yönerge.

Girdiler

Property Type Default Description
disabled boolean false Gruptaki tüm tetikleyicileri devre dışı bırakır
multiExpandable boolean true Birden fazla panelin aynı anda genişletilip genişletilemeyeceği
softDisabled boolean true true olduğunda, devre dışı öğelere odaklanılabilir. false olduğunda atlanır
wrap boolean false Klavye navigasyonunun son öğeden ilk öğeye ve tam tersi dönüp dönmeyeceği

Yöntemler

Method Parameters Description
expandAll none Tüm panelleri genişletir (yalnızca multiExpandable true olduğunda çalışır)
collapseAll none Tüm panelleri daraltır

AccordionTrigger

Panel görünürlüğünü değiştiren buton elemanına uygulanan yönerge.

Girdiler

Property Type Default Description
panel AccordionPanel — Zorunlu. Kontrol edilen akordeon panelinin referansı.
id string auto Tetikleyici için benzersiz tanımlayıcı
disabled boolean false Bu tetikleyiciyi devre dışı bırakır
expanded boolean false Panelin genişletilmiş olup olmadığı (iki yönlü bağlama destekler)

Sinyaller

Property Type Description
active Signal<boolean> Tetikleyicinin şu anda odakta olup olmadığı

Yöntemler

Method Parameters Description
expand none İlişkili paneli genişletir
collapse none İlişkili paneli daraltır
toggle none Panel genişleme durumunu değiştirir

AccordionPanel

Daraltılabilir içeriği içeren elemana uygulanan yönerge.

Girdiler

Property Type Default Description
id string auto Panel için benzersiz tanımlayıcı
preserveContent boolean true Panel daraltıldıktan sonra içeriğin DOM'da tutulup tutulmayacağı

Sinyaller

Property Type Description
visible Signal<boolean> Panelin şu anda genişletilmiş olup olmadığı

Yöntemler

Method Parameters Description
expand none Bu paneli genişletir
collapse none Bu paneli daraltır
toggle none Genişleme durumunu değiştirir

AccordionContent

Tembel render etmeyi etkinleştirmek için akordeon paneli içindeki ng-template'e uygulanan yapısal yönerge.

Bu yönergenin girdisi, çıktısı veya yöntemi yoktur. Bir ng-template elemanına uygulayın:

<div ngAccordionPanel #panel1="ngAccordionPanel">
  <ng-template ngAccordionContent>
    <!-- Buradaki içerik tembel olarak render edilir -->
  </ng-template>
</div>