Products · Components
Sheet
A panel that slides up from the bottom, over the page.
The sheet doesn't close on its own: set open back to false in onClose.
Children: Components
Example
<View>
<Button variant="secondary" onClick="openSheet">Payment options</Button>
<Sheet open="{{ open }}" title="Payment" onClose="close">
<Button variant="secondary" onClick="close">Copy reference</Button>
<Button onClick="close">Done</Button>
</Sheet>
</View>export default definePage({
initialState: { open: false },
mutations: {
openSheet: () => ({ open: true }),
close: () => ({ open: false }),
},
});Props
| Prop | Type | What it is |
|---|---|---|
open | boolean | Whether the sheet shows. |
title | string | |
showCloseIcon | boolean | Shows a close button in the corner. Tapping it sends onClose, as tapping outside does. |
padding, paddingTop, paddingStart, paddingEnd, paddingBottom | spacing | Space inside its edges, all round or on one side. |
Events
| Event | Sends | Notes |
|---|---|---|
onClose | Nothing | The person tapped outside it or its close button. |