アコーディオン コンポーネントの 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
レイアウト
Remark
Ignite UI for Angular Accordion コンポーネントを使用すると、 単一のコンテナーに表示された複数の縮小パネル間を移動できます。 Accordion は、基になるパネルの展開状態を制御するキーボード ナビゲーションと API を提供します。
Example