Vue
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

AccordionComponent

Represents the VueJS Accordion Component.

<ejs-accordion></ejs-accordion>

Properties

animation

AccordionAnimationSettingsModel

Specifies the animation configuration settings for expanding and collapsing the panel.

Defaults to { expand: { effect: ‘SlideDown’, duration: 400, easing: ‘linear’ },collapse: { effect: ‘SlideUp’, duration: 400, easing: ‘linear’ }}

dataSource

Object[]

Specifies the datasource for the accordion items.

Defaults to []

enableHtmlSanitizer

boolean

Specifies whether to enable the rendering of untrusted HTML values in the Accordion component. When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

expandMode

ExpandMode

Specifies the options to expand single or multiple panel at a time. The possible values are:

  • Single: Sets to expand only one Accordion item at a time.
  • Multiple: Sets to expand more than one Accordion item at a time.

Defaults to ‘Multiple’

expandedIndices

number[]

Specifies the expanded items at initial load.

Defaults to []

headerTemplate

string | function

Specifies the header title template option for accordion items.

Defaults to null

height

string | number

Specifies the height of the Accordion in pixels/number/percentage. Number value is considered as pixels.

Defaults to ‘auto’

itemTemplate

string | function

Specifies the template option for accordion items.

Defaults to null

items

AccordionItemModel[]

An array of item that is used to specify Accordion items.

  let accordionObj: Accordion = new Accordion( {
       items: [
         { header: 'Accordion Header', content: 'Accordion Content' }]
       });
  accordionObj.appendTo('#accordion');

Defaults to []

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

width

string | number

Specifies the width of the Accordion in pixels/number/percentage. Number value is considered as pixels.

Defaults to ‘100%’

Methods

addItem

Adds new item to the Accordion with the specified index of the Accordion.

Parameter Type Description
item AccordionItemModel | AccordionItemModel[] | Object | Object[] Item array that is to be added to the Accordion.
index (optional) number Number value that determines where the item should be added.
By default, item is added at the last index if the index is not specified.

Returns void

destroy

Removes the control from the DOM and also removes all its related events.

Returns void

enableItem

Enables/Disables the specified Accordion item.

Parameter Type Description
index number Number value that determines which item should be enabled/disabled.
isEnable boolean Boolean value that determines the action as enable (true) or disable (false).
If the isEnable value is true, the item is enabled or else it is disabled.

Returns void

expandItem

Expands/Collapses the specified Accordion item.

Parameter Type Description
isExpand boolean Boolean value that determines the action as expand or collapse.
index (optional) number Number value that determines which item should be expanded/collapsed.index is optional parameter.
Without Specifying index, based on the isExpand value all Accordion item can be expanded or collapsed.

Returns void

hideItem

Shows or hides the specified item from Accordion.

Parameter Type Description
index number Number value that determines which item should be hidden/shown.
isHidden (optional) boolean Boolean value that determines the action either hide (true) or show (false). Default value is false.
If the isHidden value is false, the item is shown or else item it is hidden.

Returns void

removeItem

Dynamically removes item from Accordion.

Parameter Type Description
index number Number value that determines which item should be removed.

Returns void

select

Sets focus to the specified index item header in Accordion.

Parameter Type Description
index number Number value that determines which item should be focused.

Returns void

Events

clicked

EmitType<AccordionClickArgs>

The event will be fired while clicking anywhere within the Accordion.

created

EmitType<Event>

The event will be fired once the control rendering is completed.

destroyed

EmitType<Event>

The event will be fired when the control gets destroyed.

expanded

EmitType<ExpandedEventArgs>

The event will be fired after the item gets collapsed/expanded.

expanding

EmitType<ExpandEventArgs>

The event will be fired before the item gets collapsed/expanded.

Previous
Next