Concepts
State attributes
Every state a part has is a data attribute, present or absent, so any styling solution can read it.
A part's state is on its element as data-* attributes. A boolean attribute is present (empty) or
absent, never "false".
Parts
Every part carries data-grid-layout-part: root, item, drag-handle, resize-handle,
placeholder, drag-source, drag-preview or cell. Items carry data-item-id. Tests select by them,
never by class names.
States
| attribute | on | when |
|---|---|---|
data-dragging | root, item, drag handle | a pointer is moving the item |
data-resizing | root, item, resize handle | a pointer is resizing the item (from this handle) |
data-grabbed | root, item, drag handle | the keyboard holds the item |
data-dropping | root | a new item from outside is over the grid |
data-drop-refused | root, drag preview | an external drag over the grid would not drop |
data-outside | root, item | the pointer holding an item, or bringing one, is off the grid |
data-dragging | drag source | a pointer is bringing its item in |
data-grabbed | drag source | the keyboard is bringing its item in |
data-disabled | drag source | it starts nothing |
data-over | drag preview | the pointer is over the grid |
data-pressing | item | a touch holds it, not yet long enough to drag it |
data-static | item | the item never moves |
data-draggable | item, drag handle | people may drag the item now |
data-resizable | item | people may resize the item now |
data-side | resize handle | its side: top, bottom, start, end or a corner |
data-breakpoint | root | the active breakpoint's name |
data-kind | placeholder | move, resize, keyboard or drop |
data-x, data-y | cell | its column and row |
From state functions
className and style also take a function of the part's state, which holds the same and more:
itemId, item (its place and size), placed and handled on an item.
<GridLayout.Item
itemId={item.id}
className={(state) => (state.dragging ? "card card-lifted" : "card")}
/>Styling showcase