Version 0.40.0

UI Organisms

Side panels


CSS component

Toggle the as--open class on the sui-o-side-panel to toggle the animation.

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

<div class="sui-o-side-panel as--open">
    <div class="sui-o-side-panel__header">
        <button class="sui-o-side-panel__close" tabindex="-1">
            &times;
        </button>
        <div class="sui-o-side-panel__title">
            Panel title
        </div>
    </div>
    <div class="sui-o-side-panel__body">
        <div class="sui-o-side-panel__scroll">
            <p>
                Lorem ipsum...
            </p>
        </div>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

<div class="sui-o-side-panel as--open">
    <div class="sui-o-side-panel__body">
        <div class="sui-o-side-panel__scroll">
            <p>
                Lorem ipsum...
            </p>
        </div>
    </div>
    <div class="sui-o-side-panel__footer">
        <div class="sui-g-grid">
            <div class="sui-g-grid__item as--pull">
                <button class="sui-a-button">
                    Cancel
                </button>
            </div>
            <div class="sui-g-grid__item as--push">
                <button class="sui-a-button as--primary">
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>
Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

<div class="sui-o-side-panel as--open">
    <div class="sui-o-side-panel__header">
        <button class="sui-o-side-panel__close" tabindex="-1">
            &times;
        </button>
        <div class="sui-o-side-panel__title">
            Panel title
        </div>
    </div>
    <div class="sui-o-side-panel__body">
        <div class="sui-o-side-panel__scroll">
            <p>
                Lorem ipsum...
            </p>
        </div>
    </div>
    <div class="sui-o-side-panel__footer">
        <div class="sui-g-grid">
            <div class="sui-g-grid__item as--pull">
                <button class="sui-a-button">
                    Cancel
                </button>
            </div>
            <div class="sui-g-grid__item as--push">
                <button class="sui-a-button as--primary">
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>

Side panel left

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

<div class="sui-o-side-panel as--open as--left">
    <div class="sui-o-side-panel__header">
        <button class="sui-o-side-panel__close" tabindex="-1">
            &times;
        </button>
        <div class="sui-o-side-panel__title">
            Panel title
        </div>
    </div>
    <div class="sui-o-side-panel__body">
        <div class="sui-o-side-panel__scroll">
            <p>
                Lorem ipsum...
            </p>
        </div>
    </div>
    <div class="sui-o-side-panel__footer">
        <div class="sui-g-grid">
            <div class="sui-g-grid__item as--pull">
                <button class="sui-a-button">
                    Cancel
                </button>
            </div>
            <div class="sui-g-grid__item as--push">
                <button class="sui-a-button as--primary">
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>

JS component

Example

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur, et impedit in iure natus nulla obcaecati praesentium quibusdam quod repudiandae voluptatem? Dolores ducimus eaque, ex obcaecati quos ullam?

How to use

Add the data-sui-o-side-panel="mySidePanel" attribute on your button (where mySidePanel is the ID of the side-panel),

<button class="sui-a-button" data-sui-o-side-panel="mySidePanel">
    ...
</button>

Then add the SidePanel HTML,

<div class="sui-o-side-panel" id="mySidePanel">
    ...
</div>

And enable the JS plugin.

import { SidePanel } from 'saagie-ui';

const myElement = document.getElementbyId('mySidePanel');

new SidePanel(myElement, { /* options */ }).init();

Options

Default options:

{        
    openClass: 'as--open',
    dataAttrBase: 'data-sui-o-side-panel',
    dataAttrSuffixToggle: '',
    dataAttrSuffixOpen: '-open',
    dataAttrSuffixClose: '-close',
    dataAttrSuffixConfirm: '-confirm',
    dataAttrClicksEnabled: true,
    htmlToBodyEnabled: true,
    focusRecoverEnabled: false,
    keysEnabled: true,
    confirmOnEnterKey: false,
    closeOnEscapeKey: true,
    clickOutsideEnabled: false,
    onInit: function () {},
    onOpen: function () {},
    onConfirm: function () {},
    onClose: function () {},
    onEnterKey: function () {},
    onEscapeKey: function () {},
    onDestroy: function () {},
}

Methods

init()

Init the panel.

const panel = new SidePanel(myElement, { /* options */ }).init();

toggle()

Open/Close the panel.

panel.toggle();

open()

Open the panel.

panel.open();

close()

Close the panel.

panel.close();

bindClickOutside() / unbindClickOutside()

Add / Remove event listener click outside the component.

panel.bindClickOutside();
panel.unbindClickOutside();

bindDataClicks() / unbindDataClicks()

Add / Remove event listeners for data attributes clicks.

panel.bindDataClicks();
panel.unbindDataClicks();

bindEvents() / unbindEvents()

Add / Remove event listeners for 'toggle', 'open', 'close', 'confirm', 'destroy' events.

panel.bindEvents();
panel.unbindEvents();

bindKeys() / unbindKeys()

Add / Remove event listeners for keys inputs.

panel.bindKeys();
panel.unbindKeys();

destroy()

Destroy all eventListeners.

panel.destroy();