Ajax filter offcanvas

A slide-in panel container for placing filter elements, ideal for mobile-responsive filter layouts.

Overview

The Woohoo Offcanvas element creates a slide-in panel that can contain filter elements, search boxes, or any content. It supports multiple positions, animations, and responsive breakpoints for optimal mobile experience.

Content Settings

Setting	Description
Offcanvas ID	Unique identifier to connect with trigger elements
Display Mode	Offcanvas (always hidden) or Responsive (breakpoint-based)
Show in Builder	Toggle visibility during page building
Mobile Breakpoint (px)	Screen width below which offcanvas activates (responsive mode)
Position	Left, Right, Top, or Bottom
Show Backdrop	Display semi-transparent overlay behind panel
Close on Backdrop Click	Close panel when clicking backdrop
Close on Escape Key	Close panel with Escape key
Animation	Slide, Fade, or None
Animation Duration (ms)	Animation speed (default: 300ms)

Design Settings

Panel:

• Width (for left/right positions)

• Max width

• Height (for top/bottom positions)

• Max height

• Background

• Padding

• Borders

Backdrop:

• Overlay color (default: rgba(0,0,0,0.5))

Layout:

• Margin

Accessibility

• role="dialog" for screen readers

• aria-modal="true" indicates modal behavior

• aria-labelledby for accessible labeling

• aria-hidden state management

Implementation

1. Add Woohoo Offcanvas element
2. Set unique Offcanvas ID (e.g., "filter-panel")
3. Choose position and display mode
4. Add filter elements inside the offcanvas
5. Use Woohoo Offcanvas Trigger to open/close

---

Woohoo Offcanvas Trigger

A button/container element that opens, closes, or toggles an Offcanvas panel.

Overview

The Woohoo Offcanvas Trigger connects to an Offcanvas panel by ID and controls its visibility. It's a container element, so you can place any content inside (text, icons, buttons).

Content Settings

Setting	Description
Target Offcanvas ID	ID of the Offcanvas element to control
Action	Toggle (switch state), Open (show only), or Close (hide only)

Design Settings

• Margin

Default Children

By default, includes a Text element with "Filters" label. Replace with your own content as needed.

Implementation

1. Add Woohoo Offcanvas Trigger element
2. Set Target Offcanvas ID to match your Offcanvas element
3. Choose action (toggle is most common)
4. Add content inside (icon, text, button, etc.)

---

Woohoo Offcanvas Close

A close button placed inside an Offcanvas panel to dismiss it.

Overview

The Woohoo Offcanvas Close element provides a dedicated close button within an Offcanvas panel. It automatically closes the parent Offcanvas when clicked.

Content Settings

None - automatically detects parent Offcanvas.

Design Settings

• Margin

Default Children

Includes an X icon by default. Customize or replace as needed.

Implementation

1. Add Woohoo Offcanvas Close inside your Offcanvas element
2. Position it where users expect a close button (typically top-right)
3. Customize the icon or content as desired

---

Woohoo Filter Portal

Teleports filter elements into an Offcanvas panel on mobile while keeping them in place on desktop.

Overview

The Woohoo Filter Portal enables responsive filter layouts where filters appear inline on desktop but move into an Offcanvas panel on mobile. Wrap your filter elements in a Portal, and they'll be teleported to the target Offcanvas when the breakpoint is reached.

Content Settings

Setting	Description
Target Offcanvas ID	ID of the Offcanvas to teleport content into
Order in Offcanvas	Numeric order for multiple portals (0-100)

Design Settings

None - portal is a structural element.

How It Works

1. On desktop (above breakpoint): Content renders in place

2. On mobile (below breakpoint): Content teleports into target Offcanvas

3. Order setting controls arrangement when multiple portals target same Offcanvas

Implementation

1. Create an Offcanvas with responsive display mode
2. Wrap filter elements in Woohoo Filter Portal
3. Set Target Offcanvas ID to match
4. Set Order if using multiple portals

Example Use Case

Desktop Layout:
[Sidebar with filters] [Main content with results]

Mobile Layout:
[Filter button] → Opens Offcanvas with all filters
[Main content with results]