@angular/aria/accordion

AccordionGroup

디렉티브

아코디언 항목 그룹을 담는 컨테이너입니다. 키보드 탐색과 펼침 모드 등 아코디언의 전체 상태와 상호작용을 관리합니다.

API

    
      class AccordionGroup implements OnDestroy {}

element

HTMLElement

그룹 엘리먼트에 대한 참조입니다.

textDirection

WritableSignal<Direction>

텍스트 방향(ltr 또는 rtl)입니다.

disabled

InputSignalWithTransform<boolean, unknown>

아코디언 그룹 전체의 비활성화 여부입니다.

multiExpandable

InputSignalWithTransform<boolean, unknown>

여러 아코디언 항목을 동시에 펼칠 수 있는지 지정합니다.

softDisabled

InputSignalWithTransform<boolean, unknown>

비활성화된 항목이 포커스를 받을 수 있는지 지정합니다. true이면 비활성화된 항목도 포커스를 받을 수 있지만 상호작용할 수는 없습니다. false이면 탐색할 때 비활성화된 항목을 건너뜁니다.

wrap

InputSignalWithTransform<boolean, unknown>

키보드 탐색 시 마지막 항목에서 첫 번째 항목으로, 첫 번째 항목에서 마지막 항목으로 순환할지 지정합니다.

ngOnDestroy

void

@returnsvoid

expandAll

void

여러 항목을 펼칠 수 있는 경우 모든 아코디언 패널을 펼칩니다.

@returnsvoid

collapseAll

void

모든 아코디언 패널을 접습니다.

@returnsvoid

설명

아코디언 항목 그룹을 담는 컨테이너입니다. 키보드 탐색과 펼침 모드 등 아코디언의 전체 상태와 상호작용을 관리합니다.

ngAccordionGroup은 아코디언 트리거와 패널 그룹의 루트로 동작하며, 안에 있는 ngAccordionTrigger와 ngAccordionPanel 엘리먼트의 동작을 조정합니다. 단일 펼침 모드와 다중 펼침 모드를 모두 지원합니다.

<div ngAccordionGroup [multiExpandable]="true">
  <div class="accordion-item">
    <h3>
      <button ngAccordionTrigger [panel]="panel1">Item 1</button>
    </h3>
    <div ngAccordionPanel #panel1="ngAccordionPanel">
      <ng-template ngAccordionContent>
        <p>Content for Item 1.</p>
      </ng-template>
    </div>
  </div>
  <div class="accordion-item">
    <h3>
      <button ngAccordionTrigger [panel]="panel2">Item 2</button>
    </h3>
    <div ngAccordionPanel #panel2="ngAccordionPanel">
      <ng-template ngAccordionContent>
        <p>Content for Item 2.</p>
      </ng-template>
    </div>
  </div>
</div>