Toggler

Description

Represents a simple toggler component with global event binding when necessary.

Requirements

• @veams/core - Veams Core Framework.
• @veams/query or jquery - Veams Query or jQuery.
• @veams/component - Veams Component.
• @veams/helpers - Veams Detection Helpers.

Installation

veams install component toggler

veams -i c toggler

Fields

toggler

Settings

| Option | Type | Default | Description | |:--- |:---:|:---:|:--- | | settings.togglerContextClasses | String | default | Context class. | | settings.togglerClasses | String | | Modifier classes. | | settings.togglerJsOptions | Object | | Options object which gets stringified. | | settings.togglerJsModule | Boolean | | Specify if component is a Javascript module or not. | | settings.togglerJsModuleWithContext | String | | Reference to specific Javascript module toggler context. | | settings.togglerId | String | | Id to reference specific toggler component instance. | | settings.attributes | Array | | List of attributes that consist of name value pairs. |

Content

| Option | Type | Default | Description | |:--- |:---:|:---:|:--- | | content.togglerField | String | | Add description. |

JavaScript Options

The module gives you the possibility to override default options:

| Option | Type | Default | Description | |:--- |:---:|:---:|:--- | | a11yFocusKeyClass | String | 'a11y-focus-key' | Class for the accessibility focus key. | | calculatingClass | String | 'is-calculating' | Class used to display calculating state. | | closeClass | String | 'is-closed' | Class when toggler is closed. | | context | Boolean | false | Context property that gets passed to toggler open event. | | dataMaxAttr | String | 'data-js-height' | Dynamic max height attribute. | | globalEvent | String | '' | Reference to global event that when triggered calls toggle method. | | globalEventId | String | '' | Compare toggler's globaleventid with the globaleventid of the object that triggered the toggle method to determine if toggle should be run or aborted. | | openClass | String | 'is-open' | Class when toggler is open. | | setOverflow | Boolean | false | Specify if overflow should be set or not. | | toggleTabindexElems | String | '' | Selector that targets elements to toggle tab-index. |

SASS Options

| Option | Type | Default | Description | |:--- |:---:|:---:|:--- | | $toggler-animation-duration-std | String | 500ms | Duration of the toggle animation. | | $toggler-animation-easing-std | Function | ease-in-out | Easing method of the animation. |