Playground
comins-grid-layout@0.3.0
The repository Playground is the executable companion to these guides. It uses the same public package surfaces and canonical routes.
git clone https://github.com/kim1124/comins-layout.gitcd comins-layoutnpm installnpm run devOpen http://127.0.0.1:6001/docs/getting-started. The API reference is http://127.0.0.1:6001/api.
Recommended route map
Section titled “Recommended route map”| Area | Route |
|---|---|
| Getting started | /docs/getting-started |
| Widget basics | /examples/widget/basic |
| Add, delete all, reset | /examples/widget/manage |
| Widget events | /examples/widget/events |
| Layout basics | /examples/layout/basic |
| Lock/unlock | /examples/layout/lock |
| Save/load | /examples/layout/persistence |
| Arrange/fill gaps | /examples/layout/arrange |
| Layout events | /examples/layout/events |
| Lazy content rendering and mount status | /examples/advanced/lazy-load |
| Responsive: column calculation and layout policy | /examples/advanced/responsive |
| Multi-grid transfer and orientation toggle | /examples/advanced/multi-grid/horizontal |
| External trash drop | /examples/advanced/external-drop-trash |
| Safe public handle | /examples/advanced/public-api |
| API reference | /api |
Additional Advanced menu routes demonstrate grid lines, float, mobile touch, controlled two-/three-level nested composition, RTL, size to content, title-only drag handles, and transforms. The multi-grid route switches horizontal and vertical presentation in place. The three responsive examples are combined on one page; former URLs remain compatible.
Static Grid is integrated into the lock-mode selector on the Layout Lock / Unlock page. Widget Basic supports default title double-click filling. Dynamic Widget Size (/examples/widget/resize) provides target selection, W/H inputs, applied size and restore. Size To Content lets you add or remove content and toggle automatic sizing to compare it with a fixed height.
Read the API reference in this order: purpose, live example, minimal code, detailed API. Entry-level launch buttons open the same Playground screens inside the reference. Only one example runs at a time; switching or closing discards its state. Types and utilities include related examples and invocation code.
The internal /readme-demo route is a deterministic browser fixture used to regenerate README animations. It is not a consumer example or a supported package route.
The five README animations use compact feature fixtures, not this full interface. Their capture notes identify the exact scenes and source date. Current guides describe source version 0.3.0; registry availability is verified separately.
When a guide and an example appear to disagree, treat the current exported TypeScript declarations and focused repository tests as the implementation contract, then report the documentation discrepancy as an issue.
In Mobile Touch, containers up to 640px use 3 columns so each initial widget has room for its title and actions. The toggle switches persistent handle visibility between "mobile" and false; movement and resizing remain available. Breakpoint examples use container width, and none still corrects bounds and overlaps. These are example settings rather than package-wide responsive defaults.
Shared React/Vue shell (0.3.0)
Section titled “Shared React/Vue shell (0.3.0)”The shell follows Comins Sortable: shared header/sidebar, example intro and API chips, underline framework tabs, right-aligned controls, and separate live workspace/source cards. Panel spacing and alignment remain the same when switching React/Vue; widget-specific controls follow Grid Layout features.
Open /examples/widget/basic/react or /examples/widget/basic/vue. Choose a feature in the sidebar and switch its native renderer with React/Vue tabs. Initial geometry, columns, cell height and primary settings match. Switching resets the example; changing language retains state. View code provides the actual TSX/SFC plus supporting files, and API names follow callbacks, emits or slots. Legacy React routes remain available. The published 0.3.0 package supports React and Vue 3 CSR.
Developers run the Playground locally with npm run dev. At widths of 900px or less, use the example selector and scroll the page to the workspace. Narrow widget titles and controls wrap within their headers.
The React and Vue 3 tabs match across all 23 examples in control order, icons, workspace layout, and result presentation; the renderer and API bindings differ. Expand Feature details · Behavior and API below the workspace for behavior, constraints, and event or method descriptions. The Vue tab uses component emit and slot names while retaining onLayoutMutation as a composable option callback.
Dynamic Widget Size allows W up to the current column count (initially 12); H ranges from 1 to 6. Basic has a 22px gap below the framework tabs. Titles show a grab cursor when movement or resizing is available, and the default cursor when both are disabled or the grid is static.