@electronic-minds/adventure-accordion
v0.0.15
Published
Enhances <details> with animations and JavaScript functionality
Downloads
1
Readme
Adventure Accordion
This package enhances the native <details>
html tag with animations and JavaScript functionality.
Install
npm i @electronic-minds/adventure-accordion
Usage
Scss
@use "@electronic-minds/adventure-accordion" as accordion;
@include accordion.configure(...);
See /src/styles/_config.scss for all possible configuration options.
JavaScript
import {Accordion} from '@electronic-minds/adventure-accordion';
new Accordion({...}).init();
Demos
Examples
Scss
There is a separate scss mixin for each component of the accordion. This way you can apply the accordion to any markup.
@use "@electronic-minds/adventure-accordion" as accordion;
@use "../adventure";
@use "../icons/variables" as icons;
@include accordion.configure((
"icon": (
"closed": icons.$plus,
"opened": icons.$minus,
"spacing": adventure.rem-calc(24)
)
));
.accordion {
.item {
@include accordion.item();
}
.title {
@include accordion.title();
@include accordion.icon-closed();
}
[open] {
.title {
@include accordion.icon-opened();
}
}
.content {
@include accordion.content();
}
}
JavaScript
const accordions = document.querySelectorAll('[data-accordion]');
accordions.forEach((el) => {
const accordion = new Accordion({
el
});
accordion.init();
});
Hinweis zur Verwendung in PHPStorm
Damit PHPStorm node_modules
-Pfade korrekt auflösen kann, müssen Vorkehrungen getroffen werden.
Gehe in deine PHPStorm Settings
und öffne dort den Punkt Directories
. Dort findest du nun eine Übersicht aller Projekt-Ordner. Mache einen Rechtsklick auf node_modules
und wähle Resource Root
als Option aus.
Werden dir in deinen Projekt-Dateien keine node_modules
angezeigt, so blendest du sie ein, indem du das kleine Zahnrad am oberen Rand des Dateibaums klickst und das Options menu
öffnest. Dort kannst du unter Tree Appearance
mittels Klick auf Show Excluded Files
die ausgeblendeten Dateien wieder einblenden.