アコーディオン コンポーネントの id を取得または設定します。
デフォルト値は "igx-accordion-0" です。
<igx-accordion id="my-first-accordion"></igx-accordion>
const accordionId = this.accordion.id;
パネルが縮小された後に発生します。
<igx-accordion (panelCollapsed)="handlePanelCollapsed($event)">
</igx-accordion>
パネルが縮小される前に発生します。
このイベントはキャンセルできます。
<igx-accordion (panelCollapsing)="handlePanelCollapsing($event)">
</igx-accordion>
パネルが展開された後に発生します。
<igx-accordion (panelExpanded)="handlePanelExpanded($event)">
</igx-accordion>
public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) {
const expandedPanel: IgxExpansionPanelComponent = event.panel;
console.log("Panel is expanded: ", expandedPanel.id);
}
パネルが展開される前に発生します。
このイベントはキャンセルできます。
<igx-accordion (panelExpanding)="handlePanelExpanding($event)">
</igx-accordion>
public handlePanelExpanding(event: IExpansionPanelCancelableEventArgs){
const expandedPanel: IgxExpansionPanelComponent = event.panel;
if (expandedPanel.disabled) {
event.cancel = true;
}
}
パネルが展開/縮小時に使用するアニメーション設定を取得または設定します。
<igx-accordion [animationSettings]="customAnimationSettings"></igx-accordion>
const customAnimationSettings: ToggleAnimationSettings = {
openAnimation: growVerIn,
closeAnimation: growVerOut
};
this.accordion.animationSettings = customAnimationSettings;
すべてのパネルを取得します。
const panels: IgxExpansionPanelComponent[] = this.accordion.panels;
アコーディオンが投影される展開パネルの展開を処理する方法を取得または設定します。
true に設定すると、一度に展開できるパネルは 1 つのみで、その他のブランチはすべて縮小されます。
<igx-accordion [singleBranchExpand]="true">
...
</igx-accordion>
this.accordion.singleBranchExpand = false;
IgxAccordion は、複数の展開パネルを収容できるコンテナー ベースのコンポーネントです。
Igx Module
IgxAccordionModule
Igx Keywords
accordion
Igx Group
レイアウト
備考
Ignite UI for Angular Accordion コンポーネントを使用すると、単一のコンテナーに表示された複数の縮小パネル間を移動できます。 Accordion は、基になるパネルの展開状態を制御するキーボード ナビゲーションと API を提供します。
例