BottomSheet
In progress
The bottom sheet component is a modified dialog that slides from the bottom of the screen, common pattern in mobile apps.
Bottom sheets can contain any anything so let your imagination fly.
Based on Headless UI.
Default
Large with all optional extras
Custom height
BottomSheet
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| hasShadow | boolean | No | - | Whether the BottomSheet has a shadow or not. |
| onClose | () => void | Yes | - | Called when the BottomSheet is dismissed. |
| open | boolean | Yes | - | Whether the BottomSheet is open or not. |
| size | string | No | sm | The size of the BottomSheet, sm, md, lg or custom pixel/percentage/rem value. |
BottomSheet.Draghandle
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | No | - | Optional title as a child to render text next to the drag handle. |
BottomSheet.Title
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization of BottomSheet Title. |
BottomSheet.Panel
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization of BottomSheet Panel. |
| hasShadow | boolean | No | - | Whether the BottomSheet has a shadow or not. |
| onClose | () => void | No | - | Called when the BottomSheet is dismissed. |
BottomSheet.Backdrop
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | - | Tailwind classes for customization of BottomSheet Backdrop. |