Off-Canvas Component - JSON API Examples

Example 1: Right Panel (JSON API)

Render trigger buttons and an off-canvas panel using the JSON Layout API. The panel slides in from the right.

V2 JSON API: The off-canvas content type automatically creates both the panel and trigger button. Panels are appended to document.body and initialized automatically. Supports position, theming, sizing, and nested content via the semantic type: "offcanvas" syntax.

const config = {
    version: 2,
    layoutId: "offcanvas-demo-1",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "offcanvas",
            id: "demo1-panel",
            position: "right",
            title: "Settings",
            content: `
                <p>Panel content here...</p>
                <button onclick="RSL.OffCanvas.closeAll()">Close</button>
            `,
            trigger: {
                text: "Open Right Panel",
                variant: "primary",
                size: "large",
                icon: "fas fa-arrow-right"
            }
        }
    }]
};

RSL.JSONLayout.renderLayout('#demo1-output', config);

// Panel and trigger button auto-created and initialized

Example 2: Left Panel with Custom Theming (JSON API)

Render an off-canvas panel from the left with custom background, text colors, and shadow using data attributes.

// Custom theming via theme object
const config = {
    version: 2,
    layoutId: "offcanvas-demo-2",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "offcanvas",
            id: "demo2-panel",
            position: "left",
            title: "Custom Theme",
            content: "<p>Themed panel content...</p>",
            trigger: {
                text: "Open Themed Left Panel",
                variant: "success",
                size: "large",
                icon: "fas fa-arrow-left"
            },
            theme: {
                background: "#2c3e50",
                heading: "#f39c12",
                text: "#ecf0f1",
                shadow: "rgba(52, 152, 219, 0.4)"
            }
        }
    }]
};

RSL.JSONLayout.renderLayout('#demo2-output', config);

Example 3: Multiple Panels (JSON API)

Render multiple trigger buttons for different panels. Only one panel can be open at a time.

const config = {
    version: 2,
    layoutId: "offcanvas-demo-3",
    breakpoints: { xs: 1, sm: 2, md: 4 },
    items: [
        {
            content: {
                type: "offcanvas",
                id: "demo3-right",
                position: "right",
                title: "Right Panel",
                content: "<p>Content...</p>",
                trigger: {
                    text: "Right Panel",
                    variant: "primary",
                    icon: "fas fa-arrow-right"
                }
            }
        },
        {
            content: {
                type: "offcanvas",
                id: "demo3-left",
                position: "left",
                title: "Left Panel",
                content: "<p>Content...</p>",
                trigger: {
                    text: "Left Panel",
                    variant: "success",
                    icon: "fas fa-arrow-left"
                }
            }
        },
        {
            content: {
                type: "button",
                text: "Close All",
                variant: "danger",
                icon: "fas fa-times",
                onClick: function() { RSL.OffCanvas.closeAll(); }
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo3-output', config);

Key Features

Slide Directions: Left, right, top, or bottom via data-off-canvas attribute
Overlay Backdrop: Click-to-close with automatic scroll lock
Focus Trap: Keyboard focus trapped within panel when open
Escape Key: Close panel with Escape key
Custom Theming: Background, text, heading colors via data attributes
Adjustable Size: Custom width/height via data-off-canvas-size
Edge Shadow: Customizable or disabled via data-off-canvas-shadow
JSON API Compatible: Auto-initializes when rendered via JSON Layout API
Focus Restoration: Returns focus to trigger element on close

Public API

The Off-Canvas component provides both automatic initialization and programmatic control:

// Initialize all off-canvas panels on the page
RSL.OffCanvas.init();

// Initialize a specific panel
const panel = document.querySelector('#myPanel');
RSL.OffCanvas.create(panel);

// Toggle panel open/closed
RSL.OffCanvas.toggle('myPanelId');

// Close all panels
RSL.OffCanvas.closeAll();

// Backward compatibility (global functions still work)
toggleOffCanvas('myPanelId');
closeAllOffCanvas();

// Automatically initialized on DOMContentLoaded
// Also auto-initialized when rendered via JSON Layout API