Sheet

Use Surface.Sheet.present() when content should slide from an edge of the viewport.

const result = await Surface.Sheet.present<string>({
  body: SelectionSheet,
});

Options

interface SheetArgs<T = any> extends SurfaceArgs<T> {
  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'full' | 'auto';
  position?: 'right' | 'left' | 'top' | 'bottom' | 'auto';
}

position

Choose where the sheet is attached:

position: 'right'

Available values:

• right
• left
• top
• bottom
• auto

With auto, the library uses bottom at widths up to 1024px and right above that breakpoint.

size

Available values:

• small
• medium
• large
• xlarge
• full
• auto

With auto, the library uses full on smaller screens and small on larger screens.

Example

await Surface.Sheet.present({
  position: 'bottom',
  size: 'large',
  body: SelectionSheet,
});

Full-screen sheet

await Surface.Sheet.present({
  position: 'right',
  size: 'full',
  body: MySurface,
});

full removes the width constraint for left and right sheets and removes the border radius.