{"panel":"/showcase/deck"}

Web widgets showcase

{"_back":"^?panel="}

Deck of cards widget

The deck is used to display a collection of nested card widgets in a flexible layout that adjusts to the width of the screen and the nested widgets.
Alaska
Population: 738,023
Land: 570,640.95
Alabama
Population: 5,073,187
Land: 50,645.33
Arkansas
Population: 3,030,646
Land: 52,035.48
Arizona
Population: 7,303,398
Land: 113,594.08
California
Population: 39,995,077
Land: 155,779.22
Colorado
Population: 5,922,618
Land: 103,641.89
Connecticut
Population: 3,612,314
Land: 4,842.36
Delaware
Population: 1,008,350
Land: 1,948.54
Florida
Population: 22,085,563
Land: 53,624.76
Georgia
Population: 10,916,760
Land: 57,513.49
Hawaii
Population: 1,474,265
Land: 6,422.63
Iowa
Population: 3,219,171
Land: 55,857.13
Idaho
Population: 1,893,410
Land: 82,643.12
Illinois
Population: 12,808,884
Land: 55,518.93
Indiana
Population: 6,845,874
Land: 35,826.11
Kansas
Population: 2,954,832
Land: 81,758.72
Kentucky
Population: 4,539,130
Land: 39,486.34
Louisiana
Population: 4,682,633
Land: 43,203.90
Massachusetts
Population: 7,126,375
Land: 7,800.06
Maryland
Population: 6,257,958
Land: 9,707.24
Maine
Population: 1,369,159
Land: 30,842.92
Michigan
Population: 10,116,069
Land: 56,538.90
Minnesota
Population: 5,787,008
Land: 79,626.74
Missouri
Population: 6,188,111
Land: 68,741.52
Mississippi
Population: 2,960,075
Land: 46,923.27
Montana
Population: 1,103,187
Land: 145,545.80
North Carolina
Population: 10,620,168
Land: 48,617.91
North Dakota
Population: 800,394
Land: 69,000.80
Nebraska
Population: 1,988,536
Land: 76,824.17
New Hampshire
Population: 1,389,741
Land: 8,952.65
New Jersey
Population: 9,388,414
Land: 7,354.22
New Mexico
Population: 2,129,190
Land: 121,298.15
Nevada
Population: 3,185,426
Land: 109,781.18
New York
Population: 20,365,879
Land: 47,126.40
Ohio
Population: 11,852,036
Land: 40,860.69
Oklahoma
Population: 4,000,953
Land: 68,594.92
Oregon
Population: 4,318,492
Land: 95,988.01
Pennsylvania
Population: 13,062,764
Land: 44,742.70
Rhode Island
Population: 1,106,341
Land: 1,033.81
South Carolina
Population: 5,217,037
Land: 30,060.70
South Dakota
Population: 901,165
Land: 75,811.00
Tennessee
Population: 7,023,788
Land: 41,234.90
Texas
Population: 29,945,493
Land: 261,231.71
Utah
Population: 3,373,162
Land: 82,169.62
Virginia
Population: 8,757,467
Land: 39,490.09
Vermont
Population: 646,545
Land: 9,216.66
Washington
Population: 7,901,429
Land: 66,455.52
Wisconsin
Population: 5,935,064
Land: 54,157.80
West Virginia
Population: 1,781,860
Land: 24,038.21
Wyoming
Population: 579,495
Land: 97,093.14

Text formatting

The Material typography scale and inline text-style helpers — colors, weights, sizes — across the framework's font stack.
open_in_newweb_assetdock_to_right

Code blocks

Server-side syntax highlighting via Chroma, with token classes mapped to Material design colors so the same markup recolors on theme change.
open_in_newweb_assetdock_to_right

Progress widget

Determinate and indeterminate progress indicators, plus the finite/infinite progress-status pattern for long-running operations.
open_in_newweb_assetdock_to_right

Toolbar widget

An action toolbar with grouped buttons and separators. Buttons that share a parent are automatically gathered into a toolbar without explicit configuration.
open_in_newweb_assetdock_to_right

Gallery widget

A horizontally-scrolling gallery of cards. Useful for featured-content rows or any list where horizontal swipe beats vertical scroll.
open_in_newweb_assetdock_to_right

Deck of cards widget

A responsive grid of cards that re-flows between 1, 2, and more columns depending on the viewport width. Good for dashboards or any uniform collection.
open_in_newweb_assetdock_to_right

Tab switcher widget

Tabbed content with smooth switching between sections. Each tab body is rendered server-side and revealed via the same state-driven redraw that powers the rest of the framework.
open_in_newweb_assetdock_to_right

Navigation widgets

The three flavors of side navigation — a compact strip, a labeled rail, and a full drawer — all driven by the same widget tree and adapting to the viewport.
open_in_newweb_assetdock_to_right

Form input widgets

Every form input widget on one page — text, email, password, OTP, dates, ranges, dropdowns, file uploads, color pickers, checkboxes, radios, star/sentiment ratings, filter and input chips, toggle switches, and the rich-text editor.
open_in_newweb_assetdock_to_right

Form validation

Client-side and server-side form validation working together: required fields, pattern matching, length limits, and custom predicate functions, with inline error messages that survive a server round-trip.
open_in_newweb_assetdock_to_right

Data table

A sortable, filterable, paginated table over a small US-states dataset. Quick-search, column sort, and page-size controls all use the same incremental-redraw plumbing the rest of the framework uses.
open_in_newweb_assetdock_to_right

CRUD

Standard create / read / update / delete flow over a per-session in-memory directory of contacts. Demonstrates form-driven persistence with validation, duplicate detection, and a record cap.
open_in_newweb_assetdock_to_right

Charts

Apache ECharts wrapped as bespa widgets. Bar, pie, column, and a US-states map all themed against the Material design tokens, with live theme switching.
open_in_newweb_assetdock_to_right

Mermaid

Mermaid diagrams (flowcharts, sequence, class, state, gantt) rendered client-side, themed against the Material design tokens, with optional zoom and pan interaction.
open_in_newweb_assetdock_to_right