Skip to content
Overlays

Affix

client20.25 kB
@stellaria/nebula-webAffixProps

Preview

Preview

Props

6
PropTypeDefault

children

required

What is pinned to the viewport — a scroll-to-top, a floating action, a cookie bar.

ReactNode

className

string

position

Which corner it sits in, as viewport insets. Setting `top` and `bottom` together stretches it rather than centring it, so pick one of each axis. Numbers are pixels; strings pass through.

AffixPosition{ bottom: 24, right: 24 }

visible

Whether it renders at all. False unmounts it outright — there is no transition here, so wrap it in a `Transition` if it should fade rather than vanish.

booleantrue

withinPortal

Renders through a portal, out of the containing layout, which is what keeps an ancestor's `transform` or `overflow` from capturing a fixed position. Turn it off only when the affix must stay inside a region that manages its own stacking.

booleantrue

zIndex

Where it sits in the stack. It starts high enough to clear page content but below the overlay range, so a modal covers it — which is the behaviour a floating action wants.

number200

Also accepts

On top of its own props, this component forwards these groups.

Style props · 123