Tree

Examples

PreviewAngularReactVueJavaScript

Custom tree node

PreviewAngularReactVueJavaScript

API (ix-tree)

Properties

Name

Description and specifications

context

Selection and collapsed state management

Type:

{ [x: string]: TreeItemContext; }

Default:

{}

model

Tree model

Type:

{ [x: string]: TreeItem<any>; }

Default:

{}

renderItem

Render function of tree items

Type:

(<T = any>(index: number, data: T, dataList: T[], context: TreeContext, update: (callback: UpdateCallback) => void) => HTMLElement) ｜ undefined

root

Initial root element will not be rendered

Attribute:

root

Type:

string

Events

Name

Description and specifications

contextChange

Context changed

Detail:

{ [x: string]: TreeItemContext; }

nodeClicked

Since 1.5.0

Node clicked event

Detail:

string

nodeRemoved

Emits removed nodes

Detail:

any

nodeToggled

Since 1.5.0

Node toggled event

Detail:

{ id: string; isExpaned: boolean; }

API (ix-tree-item)

Properties

Name

Description and specifications

context

Context

Type:

TreeItemContext ｜ undefined

hasChildren

Has tree item children

Attribute:

has-children

Type:

boolean

Default:

false

text

Text

Attribute:

text

Type:

string ｜ undefined

Events

Name

Description and specifications

itemClick

Click on item not on the expand/collapse icon

Detail:

void

toggle

Expand/Collapsed toggled

Detail:

void