Playground

Interactive UI patterns - event modifiers, animations, reactive bindings, and plugins.

Interaction Patterns

Dropdown → Modal Flow

Select an action from the @click.outside dropdown - it opens a confirmation modal. Dismiss via overlay (@click.self) or Esc.

✏️ Edit Profile 📦 Export Data 🗑️ Delete Account
Animations

Accordion

Smooth height animation with slideToggle(). Uses z-skip to opt the subtree out of morph diffing.

Reactive Bindings

Dynamic Styles

Object binding via z-style - inline styles update reactively.

Live Preview

Rich Content

Render trusted HTML with z-html - only use with sanitized content.

Conditional Classes

Switch a single class from a set using z-class - the object syntax applies only the matching key.

{{variant.charAt(0).toUpperCase() + variant.slice(1)}} Variant 
z-class="{'info': variant === 'info', 'warning': variant === 'warning'}"
Keyboard

Key & System Modifiers

Template-level keyboard filtering - no manual e.key checks needed.

{{e.name}}
Plugin System

$.fn - Extend the Collection

Register custom chainable methods on every $(...) selection. Click the buttons to trigger each plugin.

✦ Target Element
$.fn.highlight = function(color) {
  this.css({ boxShadow: '0 0 0 3px ' + color });
  setTimeout(() => this.css({ boxShadow: '' }), 1500);
  return this;   // chainable
};

$('#el').highlight().shake().glow();  // chain them!