← Back to Gallery / Behaviors / Demo

LokaScript Behaviors Demo

Reusable behaviors for common UI patterns. Each behavior can be installed on any element.

Draggable

Drag the box around the container.

Drag me!

Removable

Click items to remove them.

Click to remove (no confirmation)
Click to remove (with confirmation)
Click to fade out and remove

With Trigger Button

Only the close button removes the notification (not clicking the content).

Success! Your changes have been saved. Click the X to dismiss.
Important! This requires confirmation to dismiss.

Toggleable

Click to toggle states.

Accordion

Section 1 (click to expand)

This is the content of section 1. It can contain any HTML.

Section 2 (click to expand)

This is the content of section 2. More content here.

Sortable

Drag items to reorder them.

Resizable

Drag the corner to resize the box.

Resize me by dragging the bottom-right corner!

Clipboard

Click to copy text to clipboard. Visual feedback on the button.

npm install @hyperfixi/behaviors

AutoDismiss

These toasts auto-dismiss after a delay. Hover to pause the countdown.

Tabs

Accessible tabs with keyboard navigation. Use arrow keys, Home, and End.

Overview

LokaScript behaviors are reusable, tree-shakeable UI patterns. Install them on any element with _="install BehaviorName".

Features

  • WAI-ARIA compliant with roving tabindex
  • Keyboard navigation (Arrow keys, Home, End)
  • Cancelable tabs:change event
  • Horizontal and vertical orientation

API Reference

Parameters: orientation, activeTab, wrap, activeClass

Events: tabs:change (cancelable), tabs:changed

Vertical Tabs

Content for Tab A. Use Up/Down arrows to navigate.
Content for Tab B.

ScrollReveal

Scroll down in the container to reveal items as they enter the viewport.

Scroll down to see items appear...

First revealed item
Second revealed item
Third item (re-hides on scroll out)