Slide Panel

Off-canvas panel with backdrop overlay, portaled to body.

Live Demo

Settings

Settings saved.

Source

HTML + JavaScript 
<div data-component="settings-panel">
    <button data-action="openPanel">Open Settings</button>

    <div data-show="panelOpen" data-portal="body">
        <div class="slide-overlay" data-action="closePanel"></div>
        <div class="slide-panel" data-event-stop>
            <h3>Settings</h3>
            <label>Name</label>
            <input type="text" data-model="displayName" data-model-trim>
            <label>Notifications</label>
            <input type="checkbox" data-model="emailNotify">
            <label>Frequency</label>
            <select data-model="frequency">
                <option value="realtime">Real-time</option>
                <option value="hourly">Hourly</option>
                <option value="daily">Daily</option>
            </select>
            <button data-action="saveSettings">Save</button>
            <button data-action="closePanel">Cancel</button>
        </div>
    </div>
</div>

<script>
wildflower.component('settings-panel', {
    state: {
        panelOpen: false,
        displayName: 'Jane Doe',
        emailNotify: true,
        frequency: 'hourly',
        saved: false
    },
    openPanel() { this.panelOpen = true; },
    closePanel() { this.panelOpen = false; },
    saveSettings() {
        this.panelOpen = false;
        this.saved = true;
    }
});
</script>

Key Points

  • data-portal="body" on the wrapper teleports both overlay and panel to the body, escaping all stacking contexts
  • data-model-trim automatically trims whitespace from the name input
  • data-model works with text, checkbox, and select elements, each binding with the correct behavior for its input type
  • Clicking the overlay calls closePanel; data-event-stop on the panel prevents panel clicks from reaching the overlay

Related documentation

Portals →