1.0.2 • Published 6 years ago
@veams/component-accordion v1.0.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/core - Veams Core Framework.
- @veams/query or
jquery
- Veams Query or jQuery. - @veams/component - Veams Component.
- @veams/helpers - Veams Detection Helpers.
Installation
Installation with Veams
veams install component accordion
veams -i c accordion
Fields
accordion-usage.hbs
The partial is a \{{#wrapWith}}
helper. Documentation for wrapWith helper.
accordion.hbs
Settings
Parameter | Type | Value | Description |
---|---|---|---|
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
Parameter | Type | Description |
---|---|---|
settings.accNoWrapper | Boolean | Hide wrapper div .accordion__item . |
Parameter | Type | Description |
---|---|---|
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:
Option | Type | Default | Description |
---|---|---|---|
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 | ['tablet-s', 'tablet-l', 'desktop-s', 'desktop-m', 'desktop-l'] | Viewports on which the openIndex panel is opened on init. |
removeStyles | Boolean | false | If set to true, |
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 (clicking on active button will not close the corresponding panel). |
unresolvedClass | String | 'is-unresolved' | Define the unresolved class for the whole accordion which will be deleted after didMount() and render() is finished. |
Sass Options
There are multiple global variables which you can change:
Variable | Value | Description |
---|---|---|
$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: | 15px !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, .5) !default | Background color of the accordion button. |
$accordion-padding: | 1rem !default | Default padding which will be used in the accordion. |