Bulma Quickview

A slide-out panel extension for Bulma.

The Quickview extension provides an elegant off-canvas sliding panel for displaying content or menus. It includes a structured layout with a header, body, and footer, and can be configured to slide in from either the left or the right side.
Note: To handle the opening and closing of the Quickview panel (adding/removing the is-active class), you need a small amount of JavaScript to listen to button clicks. See the script at the bottom of the examples.

Basic Pattern

The .quickview structure consists of a .quickview-header, a scrolling .quickview-body, and a .quickview-footer. By default, it slides in from the right edge of the screen.

<button class="button is-primary" data-show="quickview" data-target="quickviewDefault">Show Quickview</button>

<div id="quickviewDefault" class="quickview">
    <header class="quickview-header">
        <p class="title">Quickview title</p>
        <span class="delete" data-dismiss="quickview"></span>
    </header>
    <div class="quickview-body">
        <p>This is the standard quickview container layout. It slides in from the right side of the screen by default.</p>
        <p>Click the close button in the header or click anywhere outside to close.</p>
    </div>
    <footer class="quickview-footer">
        <button class="button is-danger" data-dismiss="quickview">Cancel</button>
        <button class="button is-success">Save</button>
    </footer>
</div>

Quickview title

This is the standard quickview container layout. It slides in from the right side of the screen by default.

Click the close button in the header or click anywhere outside to close.

Left Alignment

Append the .is-left modifier to the .quickview container to have the panel slide in from the left side instead of the right.

<button class="button is-info" data-show="quickview" data-target="quickviewLeft">Show Left Quickview</button>

<!-- Add is-left to make it slide from the left -->
<div id="quickviewLeft" class="quickview is-left is-modal">
    <header class="quickview-header">
        <p class="title">Left Quickview</p>
        <span class="delete" data-dismiss="quickview"></span>
    </header>

    <div class="quickview-body">
        <p>Adding the <code>is-left</code> modifier changes the side the quickview appears from.</p>
        <p>Adding the <code>is-modal</code> modifier makes the quickview a modal component.</p>
    </div>

    <footer class="quickview-footer">
        <button class="button" data-dismiss="quickview">Close</button>
    </footer>
</div>

Left Quickview

Adding the is-left modifier changes the side the quickview appears from.

Adding the is-modal modifier makes the quickview a modal component.

Header Colors

The .quickview-header component supports Bulma's color modifiers (like is-success, is-warning, etc.) to set the background color.

Success Quickview

The quickview-header component supports all Bulma color modifiers.

Warning Quickview

The quickview-header component supports all Bulma color modifiers.

<div class="buttons">
    <button class="button is-success" data-show="quickview" data-target="quickviewSuccess">Success Header</button>
    <button class="button is-warning" data-show="quickview" data-target="quickviewWarning">Warning Header</button>
</div>

<!-- Apply color modifiers to the header -->
<div id="quickviewSuccess" class="quickview">
    <header class="quickview-header is-success">
        <p class="title">Success Quickview</p>
        <span class="delete" data-dismiss="quickview"></span>
    </header>
    <div class="quickview-body">
        <p>The <code>quickview-header</code> component supports all Bulma color modifiers.</p>
    </div>
    <footer class="quickview-footer">
        <button class="button" data-dismiss="quickview">Close</button>
    </footer>
</div>

<div id="quickviewWarning" class="quickview">
    <header class="quickview-header is-warning">
        <p class="title">Warning Quickview</p>
        <span class="delete" data-dismiss="quickview"></span>
    </header>
    <div class="quickview-body">
        <p>The <code>quickview-header</code> component supports all Bulma color modifiers.</p>
    </div>
    <footer class="quickview-footer">
        <button class="button" data-dismiss="quickview">Close</button>
    </footer>
</div>

Scripting

Scripting is needed to manage the quickview, it can be done with a simple function or a component model. 

class BulmaQuickview {

    constructor(node) {
        this.quickview = node;
        this.dismissTriggers = this.quickview.querySelectorAll('[data-dismiss="quickview"]');
        this.closeHandler = () => this.hideView();
        this.init();
    }

    init() {
        if(this.dismissTriggers) {
            this.dismissTriggers.forEach(btn => {
                btn.addEventListener('click', this.closeHandler);
            });
        }
    }

    showView() {
        this.quickview.classList.add('is-active');
    }

    hideView() {
        this.quickview.classList.remove('is-active');
    }

    destroy() {
        this.dismissTriggers.forEach(btn => {
            btn.removeEventListener('click', this.closeHandler);
        });
    }

}


document.addEventListener('DOMContentLoaded', () => {
    window.quickviews = {};
    document.querySelectorAll('.quickview').forEach(n => {
        const qv = new BulmaQuickview(n);
        window.quickviews[n.id] = qv;
    });
});