クラス IgxAccordionComponent

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

igxmodule

IgxAccordionModule

igxkeywords

accordion

igxgroup

Layouts

備考:

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

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

階層

  • IgxAccordionComponent

実装

  • AfterContentInit
  • AfterViewInit
  • OnDestroy

Index

コンストラクタ

プロパティ

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
  • set animationSettings(value: ToggleAnimationSettings): void
  • パネルが展開/縮小時に使用するアニメーション設定を取得/設定します。

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

    返却 ToggleAnimationSettings

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

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

    パラメーター

    • value: ToggleAnimationSettings

    返却 void

  • get singleBranchExpand(): boolean
  • set singleBranchExpand(val: boolean): void
  • アコーディオンが投影される展開パネルの展開を処理する方法を取得/設定します。 true に設定すると、一度に展開できるパネルは 1 つのみで、その他のブランチはすべて縮小されます。

    <igx-accordion [singleBranchExpand]="true">
    ...
    </igx-accordion>
    this.accordion.singleBranchExpand = false;
    

    返却 boolean

  • アコーディオンが投影される展開パネルの展開を処理する方法を取得/設定します。 true に設定すると、一度に展開できるパネルは 1 つのみで、その他のブランチはすべて縮小されます。

    <igx-accordion [singleBranchExpand]="true">
    ...
    </igx-accordion>
    this.accordion.singleBranchExpand = false;
    

    パラメーター

    • val: boolean

    返却 void

メソッド

  • collapseAll(): void
  • expandAll(): void