AccordionGroup — Angular

Контейнер для группы элементов аккордеона. Он управляет общим состоянием и взаимодействиями аккордеона, такими как навигация с помощью клавиатуры и режим раскрытия.

API

class AccordionGroup implements OnDestroy {
  readonly element: HTMLElement;
  readonly textDirection: WritableSignal<Direction>;
  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() multiExpandable: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() softDisabled: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() wrap: InputSignalWithTransform<boolean, unknown>;
  expandAll(): void;
  collapseAll(): void;
}

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>