Components
Generated by website/scripts/generate-api.ts from packages/gridla/src. Do not edit by hand; run bun run generate in website/.
Headless building blocks. GridCanvas measures itself and binds input with native listeners; GridItem positions one item and projects its children through a Slot; GridPreviewOutline shows where the active item will land.
import { GRID_DATA, GridCanvas, GridItem, GridPreviewOutline } from 'gridla/qwik'
import type { GridCanvasProps, GridItemProps, GridPreviewOutlineProps } from 'gridla/qwik'
Functions
GridCanvas
function · qwik/components.tsx:47
The element items are positioned in. Measures itself, feeds the size to the
provider, and binds pointer and keyboard handling with native listeners.
Renders a div with position: relative; give it a height (or let it
follow the layout with responsive=\{false\} on the provider).
export const GridCanvas: Component<GridCanvasProps>
GridItem
function · qwik/components.tsx:146
Positions one item inside GridCanvas. Headless: it renders a div with
geometry styles and data attributes and leaves appearance to you.
export const GridItem: Component<GridItemProps>
GridPreviewOutline
function · qwik/components.tsx:213
Renders a box where the active item will land when released. Renders
nothing when no gesture is in progress.
export const GridPreviewOutline: Component<GridPreviewOutlineProps>
Constants
GRID_DATA
const · interaction/attributes.ts:6
Data attributes the pointer gesture looks for on pointer down. Adapters emit
them on their elements: item carries the item id, dragHandle marks a
surface that starts a move, resizeHandle plus edge mark a resize handle.
export const GRID_DATA: { readonly item: "data-gridla-item"; readonly dragHandle: "data-gridla-drag-handle"; readonly resizeHandle: "data-gridla-resize-handle"; readonly edge: "data-gridla-edge"; }
Types
GridCanvasProps
type · qwik/components.tsx:32
Props for GridCanvas: div attributes (except style, which must be an
object) plus the pointer gesture options.
export type GridCanvasProps = DivProps & {
/** Fires when a press on an item ends without a drag. */
onItemClick$?: PropFunction<(itemId: string) => void>
/** Fires when Delete or Backspace is pressed while an item is selected. */
onDeleteKey$?: PropFunction<(itemId: string) => void>
/** Set to `false` to ignore pointer input. Default `true`. */
enabled?: boolean
}
GridItemProps
type · qwik/components.tsx:121
Props for GridItem. id selects the item; the rest control drag surfaces,
built-in resize handles, and how the element is positioned. Children are
projected through a Slot; read useGridItemView(id) for the item's
geometry and flags.
export type GridItemProps = Omit<DivProps, 'id'> & {
/** Id of the item in the layout. */
id: string
/**
* `true` (default): the whole element is a drag surface. `false`: only
* descendants marked with `data-gridla-drag-handle="<id>"` start a move.
*/
draggable?: boolean
/** Edges to render built-in resize handles for. Default: none. */
resizeEdges?: readonly GridResizeEdge[]
/** Class for built-in resize handles. */
resizeHandleClass?: string
/**
* Position the element with `transform` (default) or with `left`/`top`.
* Transform keeps layout work off the main thread during gestures.
*/
positioning?: GridPositioning
/** Render the cursor-tracked rect while dragging instead of the solved preview. Default `true`. */
followPointer?: boolean
}
GridPreviewOutlineProps
type · qwik/components.tsx:205
Props for GridPreviewOutline: div attributes plus the positioning mode
(transform by default).
export type GridPreviewOutlineProps = DivProps & {
positioning?: GridPositioning
}