Class IgxAccordionComponent

IgxAccordion は、複数の展開パネルを収容できるコンテナー ベースのコンポーネントです。

Igx Module

IgxAccordionModule

Igx Keywords

accordion

Igx Group

レイアウト

備考

Ignite UI for Angular Accordion コンポーネントを使用すると、単一のコンテナーに表示された複数の縮小パネル間を移動できます。 Accordion は、基になるパネルの展開状態を制御するキーボード ナビゲーションと API を提供します。

<igx-accordion>
<igx-expansion-panel *ngFor="let panel of panels">
...
</igx-expansion-panel>
</igx-accordion>

実装

  • AfterContentInit
  • AfterViewInit
  • OnDestroy

コンストラクター

プロパティ

id: string = ...

アコーディオン コンポーネントの id を取得または設定します。 デフォルト値は "igx-accordion-0" です。

<igx-accordion id="my-first-accordion"></igx-accordion>
const accordionId = this.accordion.id;
panelCollapsed: EventEmitter<IAccordionEventArgs> = ...

パネルが縮小された後に発生します。

<igx-accordion (panelCollapsed)="handlePanelCollapsed($event)">
</igx-accordion>
panelCollapsing: EventEmitter<IAccordionCancelableEventArgs> = ...

パネルが縮小される前に発生します。

備考

このイベントはキャンセルできます。

<igx-accordion (panelCollapsing)="handlePanelCollapsing($event)">
</igx-accordion>
panelExpanded: EventEmitter<IAccordionEventArgs> = ...

パネルが展開された後に発生します。

<igx-accordion (panelExpanded)="handlePanelExpanded($event)">
</igx-accordion>
public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) {
const expandedPanel: IgxExpansionPanelComponent = event.panel;
console.log("Panel is expanded: ", expandedPanel.id);
}
panelExpanding: EventEmitter<IAccordionCancelableEventArgs> = ...

パネルが展開される前に発生します。

備考

このイベントはキャンセルできます。

<igx-accordion (panelExpanding)="handlePanelExpanding($event)">
</igx-accordion>
public handlePanelExpanding(event: IExpansionPanelCancelableEventArgs){
const expandedPanel: IgxExpansionPanelComponent = event.panel;
if (expandedPanel.disabled) {
event.cancel = true;
}
}

アクセサー

  • get animationSettings(): ToggleAnimationSettings
  • パネルが展開/縮小時に使用するアニメーション設定を取得/設定します。

    <igx-accordion [animationSettings]="customAnimationSettings"></igx-accordion>
    
    const customAnimationSettings: ToggleAnimationSettings = {
    openAnimation: growVerIn,
    closeAnimation: growVerOut
    };

    this.accordion.animationSettings = customAnimationSettings;

    返却 ToggleAnimationSettings

  • set animationSettings(value): void
  • パラメーター

    • value: ToggleAnimationSettings

    返却 void

メソッド