Dockable.EdgeIndicator
Marks the band along one edge of the layout where a drop docks to that edge, shown while a drag is over the layout.
"Marks the band along one edge of the layout where a drop docks to that edge. It is positioned
(structurally) over the band the core computes (edgeDockMargin deep, edgeDockLength long,
centred), shown only while a drag that can dock to the edges is over the layout. Render it only
when you want edge indicators. pointer-events: none, like the drop indicator. Place one per
edge inside Dockable.Root; its stacking (z-index) is yours."
{(["top", "bottom", "start", "end"] as const).map((edge) => (
<Dockable.EdgeIndicator
key={edge}
edge={edge}
className="z-10 flex items-center justify-center rounded bg-palette-ring/30 data-drop-target:bg-palette-ring"
>
<ArrowIcon aria-hidden />
</Dockable.EdgeIndicator>
))}Props
EdgeIndicatorProps extends the common primitive props.
| prop | type | default | description |
|---|---|---|---|
edge | "top" | "bottom" | "start" | "end" | required | the layout edge it marks |
children | ReactNode | none | its content (an arrow icon); the primitive renders none |
State
EdgeIndicatorState:
| field | type | description |
|---|---|---|
edge | BorderLocation | the edge ("top" | "bottom" | "start" | "end") |
visible | boolean | a drag that can dock to the layout's edges is over the layout |
dropTarget | boolean | the drop would dock to this edge |
Data attributes and ARIA
| attribute | value |
|---|---|
data-layout-path | /edge/<edge>, e.g. /edge/top |
data-edge | the edge |
data-visible | shown |
data-drop-target | the drop would dock to this edge |
aria-hidden | true |
Structural style
position: absolute, left, top, width, height (the band, relative to the root),
display: none while hidden, and pointer-events: none.
The bands
engine.adapter.edgeBands() (the adapter's side) returns the four bands (EdgeBand:
{ location, rect }) of the main layout's root row: each defaults.layout.edgeDockMargin px deep (default 10) and
defaults.layout.edgeDockLength px long (default 100), centred on its edge (a length larger than
the edge gives the whole edge). With defaults.layout.edgeDock off there are none, and the
indicators stay hidden while a tabset is maximized (the drop indicator state's showEdges). The same bands decide where a drop docks to an edge, so the indicator
is exactly the drop target. Showing indicators or not is only whether you render this part.
A tab strip at the top of the layout is inside the top band's depth: a drop aimed at the strip's
middle docks to the top edge instead (gap 11). Lower defaults.layout.edgeDockMargin (e.g. to 4,
with layout.configure), or show the indicators so users see where the edge target is.