Description

A component, positioned outside any <Sheet.View>, that allows its descendants elements to be interactive when a Sheet inert-outside mechanism is applied.

When a <Sheet.View> sub-component has its inertOutside prop set to true, only descendant DOM elements of its underlying element can be interacted with. This component allows to make its descendant elements interactive as well. As such, it creates “islands of interactivity” outside of the Sheet.

For example, this is useful to keep a navigation bar accessible even though a Sheet is presented.

Anatomy

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

export default () => (
	<Island.Root>
		<Island.Content>
			{* Interactive content *}
		</Island.Content>
	</Island.Root>

	<Sheet.Root>
		<Sheet.Trigger />
		<Sheet.Portal>
			<Sheet.View inertOutside={true}>
				<Sheet.Backdrop />
				<Sheet.Content>
					{* Interactive content *}
				</Sheet.Content>
			</Sheet.View>
		</Sheet.Portal>
	</Sheet.Root>
);

Sub-components

<Island.Root>

Description

The Root sub-component wraps and shares logic with <Island.Content>.

asChild

Description

Defines whether the sub-component underlying element is the default one or the one passed as child of the sub-component.