Description

When a <Sheet.View /> sub-component has its inertOutside prop set to true, only descendant DOM elements of its underlying HTML element can be interacted with. The Island components allows to make the Island descendant HTML 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.

Structure

Basic

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 />`

Required	yes
Underlying HTML element	`div`
Requirements	Must contain `<Island.Content />`

Description

The root sub-component of the Island component.

asChild

Required	no
Value type	`boolean`
Default value	`undefined`

Values description

`true`	The underlying HTML element rendered is the child.
`false	undefined`

Description

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