Vue Bottom Sheet

A nice clean and touch-friendly bottom sheet component based on Vue.js and Typescript for Vue 3

Configure

Use Drag/Swap to Close Sheet (useDragEffect)

Only Allow Drag/Swipe from the top (header) of the Component Card to close sheet. (useOnlyHeaderForDrag)

Click outside overlay to close sheet (closeWithOverlay)

Sets Overylay background (overlayBackground):

Sets Component Card background (background):

Sets maximum height min: 10 max: 100 attainable for Component card in precentage -- %(maxHeight):

Sets maximum width attainable for Component card in pixels -- px(maxWidth):

Sets transition speed on component card min: 0 max: 10(dragSpeed):

Sets padding of header in pixels -- px(headerPadding):

Sets component card top radius in pixels -- px(topRadius):