ObjectUIComponentsOverlay
Sheet
Slide-in panel from the edge of the screen
The Sheet component displays content in a panel that slides in from the edge of the screen.
Basic Usage
Basic Sheet
{
"type": "sheet",
"trigger": {
"type": "button",
"label": "Open Sheet"
},
"title": "Sheet Title",
"description": "Sheet description goes here.",
"content": {
"type": "text",
"value": "Sheet content"
}
}Sides
Left Side
{
"type": "sheet",
"side": "left",
"trigger": {
"type": "button",
"label": "Left"
},
"title": "Left Sheet",
"content": {
"type": "text",
"value": "Content"
}
}Right Side
{
"type": "sheet",
"side": "right",
"trigger": {
"type": "button",
"label": "Right"
},
"title": "Right Sheet",
"content": {
"type": "text",
"value": "Content"
}
}Schema
interface SheetSchema {
type: 'sheet';
trigger: ComponentSchema; // Trigger component
title?: string; // Sheet title
description?: string; // Sheet description
content: ComponentSchema; // Sheet content
side?: 'left' | 'right' | 'top' | 'bottom';
className?: string;
}