Toggler
Represents a simple toggler with global event binding.
Requirements
Veams >= v5.0.0- Veams Framework.
Installation
Installation with Veams
veams install vc toggler
SASS
Variables
- $toggler-animation-duration-std {
String} ['200ms']; - $toggler-animation-easing-std {
Function} [ease-in-out];
Fields
toggler
Settings
- 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
- content.togglerField {
String} - Add description.
JavaScript Options
The module gives you the possibility to override default options:
- 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.