Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

クラス IgxExpansionPanelComponent

階層

  • IgxExpansionPanelComponent

実装

コンストラクタ

プロパティ

アクセサー

メソッド

Object literals

コンストラクタ

constructor

プロパティ

id

id: string = `igx-expansion-panel-${NEXT_ID++}`

展開パネル コンポーネントの 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> = new EventEmitter<IExpansionPanelEventArgs>()

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

 handleCollapsed(event: {
 panel: IgxExpansionPanelComponent,
 event: Event
})
 <igx-expansion-panel (onCollapsed)="handleCollapsed($event)">
     ...
 </igx-expansion-panel>

onExpanded

onExpanded: EventEmitter<IExpansionPanelEventArgs> = new EventEmitter<IExpansionPanelEventArgs>()

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

 handleExpanded(event: {
 panel: IgxExpansionPanelComponent,
 event: Event
})
 <igx-expansion-panel (onExpanded)="handleExpanded($event)">
     ...
 </igx-expansion-panel>

アクセサー

collapsed

  • get collapsed(): boolean
  • set collapsed(value: boolean): void

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

     const myPanelState: boolean = this.panel.collapsed;

    Set

     this.panel.collapsed = true;

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

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

    返却 boolean

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

     const myPanelState: boolean = this.panel.collapsed;

    Set

     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

open

  • open(evt?: Event): void

toggle

  • toggle(evt?: Event): void

Object literals

animationSettings

animationSettings: object

Sets/gets the animation settings of the expansion panel component Open and Close animation should be passed

Get

 const currentAnimations = this.panel.animationSettings;

Set

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

or via template

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

closeAnimation

closeAnimation: AnimationReferenceMetadata = growVerOut

openAnimation

openAnimation: AnimationReferenceMetadata = growVerIn