@electronic-minds/adventure-accordion v0.0.15

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

• Basic demo
• FAQ demo
• Event binding demo

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.