Description

A component that groups together several Sheets and enable the definition of stacking-driven animations (i.e. animations based on the travel of Sheets stacked on top of each other).

Notes

• The Sheets can be either siblings or nested.

Current limitation

• 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.

Anatomy

Sibling sheets

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>
);

Nested sheets

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 />
						
						{/* Nested sheet */}
						<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.Content>
				</Sheet.View>
			</Sheet.Portal>
		</Sheet.Root>
);

Sub-components

<SheetStack.Root>

• Contains all associated <Sheet.Root> | | Underlying element | <div> |

Description

The Root sub-component wraps all other sub-components of the same SheetStack instance as well as the associated Sheet instances’ <Sheet.Root> sub-components.