Accordion Typescript API

Interface

Accordion

Accordion organizes content within collapsable items.

Selector

smart-accordion

Properties

animationAnimation

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Default valueadvanced

disabledboolean

Enables or disables the accordion. Disabled elements can not be interacted with.

Default valuefalse

expandedIndexesnumber[]

Sets or gets the expanded item indexes. Using this property items can be expanded by passing in their indexes. The number of expanded items is limited by the expandMode.

expandModeAccordionExpandMode

Sets or gets the expand mode. Expand mode determines how the items will expand or collapse.

Default valuesingleFitHeight

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value"en

localizeFormatFunctionany

Callback used to customize the format of the messages that are returned from the Localization Module.

messagesany

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value


"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"accordionItemRequired": "{{elementType}}: '{{method}}' requires an item from type \"smart-accordion-item\".",

"indexOutOfBound": "{{elementType}}: Out of bound index/indexes in '{{method}}' method.",

"invalidSettings": "{{elementType}}: '{{method}}' method accepts a string or an object as it's second parameter.",

"noItems": "{{elementType}}: No child elements found.",

"overridingProperties": "{{elementType}}: Overriding properties {{property1}} and {{property2}} applied. The '{{property1}}' property is used by default."

}

readonlyboolean

Determines if the element is readonly or not. If the element true, users cannot interact with it.

Default valuefalse

reorderboolean

Enables or disables accordion reordering.

Default valuefalse

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default valuefalse

themestring

Determines the theme. Theme defines the look of the element

Default value"

unfocusableboolean

Determines whether the element can be focused or not.

Default valuefalse

oncollapse((this: Window, ev: Event) => any) | null

This event is triggered when an item is collapsed.

Arguments

oncollapsing((this: Window, ev: Event) => any) | null

This event is triggered when an item is going to be collapsed.

Arguments

ondragend((this: Window, ev: Event) => any) | null

This event is triggered when a reordering operation is completed.

Arguments

ondragstart((this: Window, ev: Event) => any) | null

This event is triggered when a reordering operation is started.

Arguments

onexpand((this: Window, ev: Event) => any) | null

This event is triggered when an item is expanded.

Arguments

onexpanding((this: Window, ev: Event) => any) | null

This event is triggered when an item is going to be expanded.

Arguments

Methods

collapse( position: number): void

Collapses an item at a specified index.

Arguments

positionnumber

The index of the collapsed item.

expand( position: number): void

Expands an item at a specified index.

Arguments

positionnumber

The index of the expanded item.

insert( index: number, item: any): void

Inserts a new item at a specified index.

Arguments

indexnumber

The index where the item must be inserted.

itemany

An object containing the values for the properties of the new item to be inserted.

removeAt( position: number): void

Removes an item at a specified index.

Arguments

positionnumber

The index of the item to be removed.

update( index: number, settings: any): void

Updates an item from the element.

Arguments

indexnumber

The index of the item to be updated.

settingsany

An object containing the values for the properties of the item that will be updated.

Enums

AccordionItem

Single item in an Accordion view.

Selector

smart-accordion-item

Properties

arrowAccordionItemArrow

Sets or gets header's arrow position. If the value is 'none' the arrow is not shown.

Default valueleft

contentstring | HTMLElement

Sets or gets the content if the item.

Default value""

expandedboolean

Sets or gets the expanded state.

Default valuefalse

focusedboolean

Sets or gets the focus state.

Default valuefalse

labelstring

Sets or gets the label if the item.

Default value"""

oncollapse((this: Window, ev: Event) => any) | null

This event is triggered when the item is collapsed.

Arguments

onexpand((this: Window, ev: Event) => any) | null

This event is triggered when the item is expanded.

Arguments

Enums