Sheet
Demo
Props
| Prop | Type | Description |
|---|---|---|
trigger | React.ReactNode (optional) | The element that triggers the Sheet to open. |
title | string (optional) | The title displayed in the Sheet's header. |
description | string (optional) | The description text displayed under the title in the header. |
children | React.ReactNode (optional) | The main content of the Sheet. |
footer | React.ReactNode (optional) | The footer content, typically used for a close or action button. |
side | 'top' | 'right' | 'bottom' | 'left' | The side from which the Sheet appears. |
open | boolean (optional) | Controls whether the Sheet is open or closed. |
onOpenChange | (open: boolean) => void (optional) | Callback function that triggers on Sheet's open state change. |
classNames | { [key: string]: string } (optional) | Custom class names for various Sheet elements. |
Styles
This component allows for custom styles via the classNames prop:
trigger: CSS class for styling the trigger element.content: CSS class for styling the Sheet content.header: CSS class for styling the header.title: CSS class for styling the title.description: CSS class for styling the description.footer: CSS class for styling the footer.