Description

The component containing all the sub-components necessary to build an advanced sheet.

Structure

Basic

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

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

With Stack

import { Sheet, SheetStack } 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.Portal>
				<Sheet.View>
					<Sheet.Backdrop />
					<Sheet.Content>
						<Sheet.BleedingBackground />
						<Sheet.Title />
						<Sheet.Description />
					</Sheet.Content>
				</Sheet.View>
			</Sheet.Portal>
		</Sheet.Root>
	</SheetStack.Root>
);

With createComponentId

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

const mySheetId = createComponentId();

export default () => {
	return (
		<Sheet.Root componentId={mySheetId}>
			<Sheet.Root>
				<Sheet.Trigger />
				<Sheet.Portal>
					<Sheet.View>
						<Sheet.Backdrop />
						<Sheet.Content>
							<Sheet.BleedingBackground />
							<Sheet.Title />
							<Sheet.Description />
							<Sheet.Trigger forComponent={mySheetId} />
						</Sheet.Content>
					</Sheet.View>
				</Sheet.Portal>
			</Sheet.Root>

			<Sheet.Trigger forComponent={mySheetId} />
			<Sheet.Portal>
				<Sheet.View forComponent={mySheetId}>
					<Sheet.Backdrop />
					<Sheet.Content>
						<Sheet.BleedingBackground />
						<Sheet.Title />
						<Sheet.Description />
					</Sheet.Content>
				</Sheet.View>
			</Sheet.Portal>
		</Sheet.Root>
	)
}

With all sub-components & related components

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

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

With SpecialWrapper

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

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

Examples

• Bottom Sheet

Sub-components

<Sheet.Root />