Group

Examples

Basic

PreviewAngularReactVueJavaScript

Suppress header selection

PreviewAngularReactVueJavaScript

Custom group entry

PreviewAngularReactVueJavaScript

Group with context menu

note

Please note that there is an issue with the slot rendering that can only be fixed with the next major version of Siemens iX. Luckily there exists a workaround for rendering context menus inside the group component.

To show a context menu place an ix-dropdown with slot="dropdown" combined with ix-dropdown-item's inside the ix-group-tag tag.

PreviewAngularReactVueJavaScript

API (ix-group)

Properties

Name

Description and specifications

collapsed

Whether the group is collapsed or expanded. Defaults to true.

Attribute:

collapsed

Type:

boolean

Default:

true

expandOnHeaderClick

Expand the group if the header is clicked

Attribute:

expand-on-header-click

Type:

boolean

Default:

false

header

Group header

Attribute:

header

Type:

string ｜ undefined

index

The index of the selected group entry. If undefined no group item is selected.

Attribute:

index

Type:

number ｜ undefined

selected

Whether the group is selected.

Attribute:

selected

Type:

boolean

Default:

false

subHeader

Group header subtitle

Attribute:

sub-header

Type:

string ｜ undefined

suppressHeaderSelection

Prevent header from being selectable

Attribute:

suppress-header-selection

Type:

boolean

Default:

false

Events

Name

Description and specifications

collapsedChanged

Group collapsed

Detail:

boolean

selectGroup

Emits when whole group gets selected.

Detail:

boolean

selectItem

Emits when group item gets selected.

Detail:

number

API (ix-group-item)

Properties

Name

Description and specifications

focusable

The elements tabindex attribute will get set accordingly. If true tabindex will be 0, -1 otherwise.

Attribute:

focusable

Type:

boolean

Default:

true

icon

Group item icon

Attribute:

icon

Type:

string ｜ undefined

index

Index

Attribute:

index

Type:

number ｜ undefined

secondaryText

Group item secondary text

Attribute:

secondary-text

Type:

string ｜ undefined

selected

Show selected state

Attribute:

selected

Type:

boolean

Default:

false

suppressSelection

Supress the selection of the group

Attribute:

suppress-selection

Type:

boolean

Default:

false

text

Group item text

Attribute:

text

Type:

string ｜ undefined

Events

Name

Description and specifications

selectedChanged

Selection changed

Detail:

HTMLIxGroupItemElement