5.2.2 • Published 6 years ago
veams-component-accordion v5.2.2
Accordion
Description
The component represents a simple accordion with transitions
and max-height
.
Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.
The accordion is based on the blueprint of Veams-Components and is a wrap-with component to support flexible content with predefined surrounded markup.
The accordion is jQuery-free (we use Veams-Query) and contains some accessiblity functionality.
Requirements
Veams >= v5.0.0
- Veams Framework.
Installation
Installation with Veams
veams install vc accordion
Fields
accordion.hbs
Settings
- settings.accContextClass {
String
} default - Context class of component. - settings.accClasses {
String
} - Modifier classes for component. - settings.accJsOptions {
Object
} - JavaScript options which gets stringified.
accordion__item.hbs
Settings
- settings.accNoWrapper {
Boolean
} - Hide wrapper div.accordion__item
.
Further Parameters
- accItemId {
String
} - Id of the accordion item. - accButton {
String
} - Button text for accordion item.
JavaScript Options
The module gives you the possibility to override default options:
- activeClass {
String
} 'is-active' - Define the active class for active elements. - accordionBtn {
String
} ['data-js-item='accordion-btn''] - Define the element for accordion buttons. - accordionContent {
String
} ['data-js-item="accordion-content"'] - Define the element for accordion content items. - calculatingClass {
String
} 'is-calculating' - Define the calculating class for the initial calculation cycle. - clickHandler {
String
} 'click' - Define a click handler for the buttons. - closeClass {
String
} 'is-closed' - Define the closing class for accordion content items. - dataMaxAttr {
String
} 'data-js-height' - Define the attribute in which the calculated height is saved. - openAllOnInit {
Boolean
} false - If set to true, all panels stays open on render. - openByHash {
Boolean
} false - If set to true, panel can be opened by url hash referencing the id of the panel. - openClass {
Boolean
} 'is-open' - Define the opening class for accordion content items. - openIndex {
Number
} null - Index of panel to be opened on init (zero based). - openOnViewports {
Array
} [ 'desktop', 'tablet-large', 'tablet-small' ] - Viewports on which the openIndex panel is opened on init. - singleOpen {
Boolean
} false - If set to true, only one panel can be opened at the same time. - tabMode {
Boolean
} false - If set to true, the accordion behaves like a tab module (click on active button will not close corresponding panel). - unresolvedClass {
String
} 'is-unresolved' - Define the unresolved class for the whole accordion which will be deleted afterinitialize()
andrender()
is finished.
Sass Options
There are multiple global variables which you can change:
- $accordion-toggle-duration
300ms !default
- Speed of toggling. - $accordion-transition-method
ease !default
- Transition method of toggle effect. - $accordion-icon-color
#666 !default
- + icon color. - $accordion-icon-width
30px !default
- + icon width. - $accordion-icon-height
2px !default
- + icon height. - $accordion-btn-color
[$accordion-icon-color !default
] - Accordion button color. - $accordion-btn-bg-color
rgba(255, 255, 255, 0.5) !default
- Background color of the accordion button. - $accordion-padding
1rem !default
- Default padding which will be used in the accordion.