@veams/component-toggler
1.0.1 • Public • Published
Toggler
Description
Represents a simple toggler component with global event binding when necessary.
Requirements
Installation
veams install component 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. |
Package Sidebar
Install
npm i @veams/component-toggler
Weekly Downloads