1.0.0-beta.2 • Published 11 months ago

@ryze-digital/accordion v1.0.0-beta.2

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

RYZE Digital Accordion

Run linter(s) workflow status

Install

npm i @ryze-digital/accordion

Usage

HTML

Class names can be changed if necessary, as long as you include the mixins (see Scss) correctly. If you want to prevent multiple accordions from being opened at the same time, you must assign a name attribute with the same value to each <details> element.

<div class="accordion" data-accordion>
    <details class="item">
        <summary class="title" data-title>
            Your accordion title 1
        </summary>
        <div class="content" data-content>
            Your accordion content 1
        </div>
    </details>
    <details class="item">
        <summary class="title" data-title>
            Your accordion title 2
        </summary>
        <div class="content" data-content>
            Your accordion content 2
        </div>
    </details>
</div>

Scss

@use "@ryze-digital/accordion";

Use the provided configure mixin to define your accordion defaults.

@include accordion.configure(...);
OptionTypeDefaultDescription
paddingMapThe shared padding used for title and content
padding.rightNumber0
padding.leftNumber0
titleMapConfiguration options especially for the title
title.paddingMap
title.padding.topNumberscss-utilities.rem-calc(8)
title.padding.bottomNumberscss-utilities.rem-calc(8)
contentMapConfiguration options especially for the content
content.paddingMap
content.padding.topNumberscss-utilities.rem-calc(8)
content.padding.bottomNumberscss-utilities.rem-calc(8)
iconMapConfigure which icons from your icon font should be used
icon.positionString (Quoted)"after"Should the icons be inserted before or after the title
icon.topNumbernullTop value for absolute position
icon.closedString (Quoted)nullThe UTF-8 character of the icon used on a closed accordion
icon.openedString (Quoted)nullThe UTF-8 character of the icon used on an opened accordion
icon.spacingNumbernullThe gap between icon and title

Check out the actual configure mixin for better understanding.

There is a separate mixin for each element in the accordion so styles can be applied to any markup.

.accordion {
    .item {
        @include accordion.item();
    }
    .title {
        @include accordion.title();
        @include accordion.icon-closed();
    }
    [open] {
        .title {
            @include accordion.icon-opened();
        }
    }
    .content {
        @include accordion.content();
    }
}

JavaScript

import { Accordion } from '@ryze-digital/accordion';

new Accordion({...}).init();
OptionTypeDefaultDescription
elHTMLElementdocument.querySelector('[data-accordion]')Container to which the library should be bound
allowDeepLinkbooleantrueOpen and scroll to accordion item based on URL hash
animationobject{  duration: 400,  easing: 'ease-out'}

Demos

Checkout this repository and use the /demos folder as document root to see a running demo in the browser.