@veams/component-toggler NPM

Toggler

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

veams install component toggler

veams -i c toggler

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.

Option	Type	Default	Description
content.togglerField	String		Add description.

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.

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.

6 years ago

6 years ago