Examples

Each example page loads one runnable demo. Demos use the published [email protected] CDN version by default. Add ?sodialogVersion=latest to try another published version.

Runnable Examples

Modal Basic

Minimal modal, default footer, and header dragging.

Modal Promise

Confirm, prompt, and form as a cancelable workflow.

Image Preview

Centered preview, mouse-wheel zoom, and optional controls.

Offcanvas

Placement, sizing, and animation for edge panels.

Toast Basic

Status messages, placement, and auto close.

Toast Queue

Queue limit, duplicate strategy, and progress.

Context Menu

Right-click menu, icons, and keyboard paths.

Tooltip

Hover, focus, long press, and dynamic list hints.

Tags Input

Editing, paste, reset, and form value synchronization.

Menu to Dialog

Open dialogs from menu actions.

Labs

Playbook

Modal Lab

Generate practical configs for confirmations, forms, deploy prompts, and drag handles.

Scenario presetsDrag handlesDeploy presetGenerated code

Open LabView API

Playbook

Toast Playbook

Validate queue, placement, and duplicate message behavior.

QueuePlacementDuplicate strategy

Open LabView API

Playbook

Offcanvas Playbook

Check placement, sizing, animation, and mobile panel behavior.

PlacementSizeMobile panel

Open LabView API

Playbook

Context Menu Playbook

Check keyboard paths, typeahead, and dialog bridging.

KeyboardTypeaheadDialog bridge

Open LabView API

Legacy Demo

The legacy demo remains available for full-page regression checks, but it is no longer embedded in the examples index.

Open legacy demoLegacy demo page