クラス IgxExpansionPanelComponent

階層

  • ToggleAnimationPlayer
    • IgxExpansionPanelComponent

実装

  • IgxExpansionPanelBase
  • AfterContentInit

Index

コンストラクタ

  • new IgxExpansionPanelComponent(animationService: AnimationService, cdr: ChangeDetectorRef, elementRef?: ElementRef<any>): IgxExpansionPanelComponent

プロパティ

collapsed: boolean = true

コンポーネントが縮小された (コンテンツが非表示) かどうかを取得または設定します。 次を取得:

 const myPanelState: boolean = this.panel.collapsed;

次を設定:

 this.panel.collapsed = true;

双方向データ バインディング。

<igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel>
contentCollapsed: EventEmitter<IExpansionPanelEventArgs> = ...

展開パネルが縮小を完了したときに発生されます。

 handleCollapsed(event: IExpansionPanelEventArgs)
 <igx-expansion-panel (contentCollapsed)="handleCollapsed($event)">
...
</igx-expansion-panel>
contentCollapsing: EventEmitter<IExpansionPanelCancelableEventArgs> = ...

展開パネルが縮小を開始するときに発生します。

 handleCollapsing(event: IExpansionPanelCancelableEventArgs)
 <igx-expansion-panel (contentCollapsing)="handleCollapsing($event)">
...
</igx-expansion-panel>
contentExpanded: EventEmitter<IExpansionPanelEventArgs> = ...

展開パネルが展開を完了したときに発生されます。

 handleExpanded(event: IExpansionPanelEventArgs)
 <igx-expansion-panel (contentExpanded)="handleExpanded($event)">
...
</igx-expansion-panel>
contentExpanding: EventEmitter<IExpansionPanelCancelableEventArgs> = ...

展開パネルが展開を開始したときに発生します。

 handleExpanding(event: IExpansionPanelCancelableEventArgs)
 <igx-expansion-panel (contentExpanding)="handleExpanding($event)">
...
</igx-expansion-panel>
id: string = ...

展開パネル コンポーネントの id を設定または取得します。 設定しない場合、id は値 "igx-expansion-panel-0" を持ちます。

<igx-expansion-panel id = "my-first-expansion-panel"></igx-expansion-panel>
let panelId =  this.panel.id;
次のメンバー:

IgxExpansionPanelComponent

アクセサー

  • get animationSettings(): ToggleAnimationSettings
  • set animationSettings(value: ToggleAnimationSettings): void
  • 展開パネルコンポーネントのアニメーション設定を設定または取得します。 Open および Close アニメーションを渡す必要があります。

    次を取得:

     const currentAnimations = this.panel.animationSettings;
    

    次を設定:

     import { slideInLeft, slideOutRight } from 'igniteui-angular';
    ...
    this.panel.animationsSettings = {
    openAnimation: slideInLeft,
    closeAnimation: slideOutRight
    };

    またはテンプレート経由:

     import { slideInLeft, slideOutRight } from 'igniteui-angular';
    ...
    myCustomAnimationObject = {
    openAnimation: slideInLeft,
    closeAnimation: slideOutRight
    };
    ```html
    <igx-expansion-panel [animationSettings]='myCustomAnimationObject'>
    ...
    </igx-expansion-panel>

    返却 ToggleAnimationSettings

  • 展開パネルコンポーネントのアニメーション設定を設定または取得します。 Open および Close アニメーションを渡す必要があります。

    次を取得:

     const currentAnimations = this.panel.animationSettings;
    

    次を設定:

     import { slideInLeft, slideOutRight } from 'igniteui-angular';
    ...
    this.panel.animationsSettings = {
    openAnimation: slideInLeft,
    closeAnimation: slideOutRight
    };

    またはテンプレート経由:

     import { slideInLeft, slideOutRight } from 'igniteui-angular';
    ...
    myCustomAnimationObject = {
    openAnimation: slideInLeft,
    closeAnimation: slideOutRight
    };
    ```html
    <igx-expansion-panel [animationSettings]='myCustomAnimationObject'>
    ...
    </igx-expansion-panel>

    パラメーター

    • value: ToggleAnimationSettings

    返却 void

メソッド

  • close(evt?: Event): void
  • collapse(evt?: Event): void
  • expand(evt?: Event): void
  • ngOnDestroy(): void
  • open(evt?: Event): void
  • toggle(evt?: Event): void