クラス IgxExpansionPanelComponent

階層

  • ToggleAnimationPlayer
    • IgxExpansionPanelComponent

実装

  • IgxExpansionPanelBase
  • AfterContentInit

Index

コンストラクタ

プロパティ

アクセサー

メソッド

コンストラクタ

constructor

プロパティ

id

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

onCollapsed

onCollapsed: EventEmitter<IExpansionPanelEventArgs> = ...

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

 handleCollapsed(event: IExpansionPanelEventArgs)
 <igx-expansion-panel (onCollapsed)="handleCollapsed($event)">
     ...
 </igx-expansion-panel>

onExpanded

onExpanded: EventEmitter<IExpansionPanelEventArgs> = ...

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

 handleExpanded(event: IExpansionPanelEventArgs)
 <igx-expansion-panel (onExpanded)="handleExpanded($event)">
     ...
 </igx-expansion-panel>

アクセサー

animationSettings

  • 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

collapsed

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

     const myPanelState: boolean = this.panel.collapsed;
    

    次を設定:

     this.panel.collapsed = true;
    

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

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

    返却 boolean

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

     const myPanelState: boolean = this.panel.collapsed;
    

    次を設定:

     this.panel.collapsed = true;
    

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

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

    パラメーター

    • value: boolean

    返却 void

メソッド

close

  • close(evt?: Event): void

collapse

  • collapse(evt?: Event): void

expand

  • expand(evt?: Event): void

ngOnDestroy

  • ngOnDestroy(): void

open

  • open(evt?: Event): void

toggle

  • toggle(evt?: Event): void