Dock
@stellaria/nebula-webDockPropsPreview
Props
14| Prop | Type | Default |
|---|---|---|
aria-label requiredThe name of the landmark. Both surfaces are `aside` and carry it. | string | — |
children requiredThe controls. A function receives `stacked`: `false` in the row that shows on wide screens, `true` inside the popover the dock folds into — the same controls, drawn twice, so a `Select` can take a fixed width in the row and the full width in the column. | ReactNode | ((stacked: boolean) => ReactNode) | — |
className | string | — |
compactBelow Below this breakpoint the row folds into a single button that opens the same controls in a popover. Three controls in a row measure ~300 px and a phone has 390. `false` never folds. | false | DockCompactBelow | "phone" |
level The glass step of both surfaces. | GlassLevel | "strong" |
offset Distance between the folded button and its popover, in px. | number | 12 |
placement Where the popover opens from the folded button. | PopoverPlacement | "top end" |
position Which corner it sits in. | AffixPosition | { bottom: 24, right: 24 } |
trigger What the folded button shows. It is `aria-hidden`; `triggerLabel` names the button. | ReactNode | — |
triggerLabel The name of the folded button. Falls back to `aria-label`. | string | — |
visible Whether it renders at all. | boolean | true |
width Width of the popover the controls stack into. | string | number | 220 |
withinPortal Renders through a portal, like `Affix`. | boolean | true |
zIndex | number | 200 |
Slot props
5Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
compactProps The folded surface, the one holding the button. Same contract as `surfaceProps`. | Omit<BoxSlotProps, "shadow" | "component"> | — |
popoverProps The popover the controls stack into. | Partial<Omit<PopoverProps, "children" | "trigger">> | — |
stackProps The column inside that popover. | BoxSlotProps | — |
surfaceProps The row surface, a `GlassSurface`: its `shadow` is the glass one, so it is not a style prop here. | Omit<BoxSlotProps, "shadow" | "component"> | — |
triggerProps The folded button. | ActionIconProps | — |
Also accepts
On top of its own props, this component forwards these groups.