Description

A primitive component that handles positioning in relation to the viewport. It provides extra features compared to normal CSS position: fixed.

Features

• Traps scrolling occurring on the underlying elements, preventing page scrolling when used in combination with a Sheet component for example.
• Preserves the visual position of the underlying element when it is a descendant of <Sheet.Outlet> or <SheetStack.Outlet> underlying elements and those have their transform CSS property animated during a travel or stacking animation.
• Exposes --x-collapsed-scrollbar-thickness and --y-collapsed-scrollbar-thickness CSS custom properties when page scrolling is temporarily disabled, allowing to adjust the position of the underlying elements and descendant elements to avoid visual position changes caused by the removal of the page scrollbars.

Notes

• <Sheet.View> is internally wrapped inside of a Fixed component, so you can use it in the same way without having to wrap it yourself.

Anatomy

Basic

import { Fixed } from "@silk-hq/sheet";

export default () => (
	<Fixed.Root>
		<Fixed.Content>
			...
		</Fixed.Content>
	</Fixed.Root>
);

With <Sheet.Outlet>

import { Sheet, Fixed } from "@silk-hq/sheet";

export default () => (
	<Sheet.Outlet>
		<Fixed.Root>
			<Fixed.Content>
				...
			</Fixed.Content>
		</Fixed.Root>
	</Sheet.Outlet>
);

Sub-components

<Fixed.Root>