Description

A component designed to group together several Sheet components and enable the definition of stacking-driven animations (i.e. animations based on the travel of Sheets stacked on top of each other).

Limitations

Sheets which are part of a SheetStack can only be dismissed when they are frontmost (i.e. at the top of the stack). This limitation will be lifted in the future.

Structure

Basic

import { Sheet } from "@silk-hq/components";

export default () => (
	<SheetStack.Root>
		<SheetStack.Outlet />
	
		<Sheet.Root>
			<Sheet.Trigger />
			<Sheet.Portal>
				<Sheet.View>
					<Sheet.Backdrop />
					<Sheet.Content>
						<Sheet.Title />
						<Sheet.Description />
					</Sheet.Content>
				</Sheet.View>
			</Sheet.Portal>
		</Sheet.Root>
		
		<Sheet.Root>
			<Sheet.Trigger />
			<Sheet.Portal>
				<Sheet.View>
					<Sheet.Backdrop />
					<Sheet.Content>
						<Sheet.Title />
						<Sheet.Description />
					</Sheet.Content>
				</Sheet.View>
			</Sheet.Portal>
		</Sheet.Root>
	</SheetStack.Root>
);

Sub-components

`<SheetStack.Root />`

Required	yes
Underlying HTML element	`div`
Requirements	Must be a contain all SheetStack sub-components of the same instance.
Must contain all associated `<Sheet.Root />` sub-components.

Description

The root sub-component for the SheetStack component.

asChild

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

Values description

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

Description