Draggable and auto resize action sheet (modal sheet)
Sovai opened this issue · comments
What problem does this feature solve?
The current action sheet is cool, but not being able to drag it feels like a missed opportunity. Wouldn't it be awesome to have a bottom sheet that we can pull up or down as needed? This could either be a new component or use the existing action sheet.
Requested Features:
Draggable: Users should be able to drag the sheet up or down to open or close it, enhancing interaction.
Breakpoints: The bottom sheet should have configurable breakpoints to define its expanded, collapsed, and intermediate states.
Programmatic Control: Provide methods to programmatically open or close the bottom sheet, allowing developers to control its behavior based on application logic.
Confirmation on Close: Implement an optional confirmation dialog before closing the bottom sheet, preventing accidental dismissals.
Responsive Resize: The bottom sheet should automatically adjust its size when the content height changes, ensuring a seamless user experience.
Scrollable Content: Allow the content within the bottom sheet to be scrollable, accommodating varying amounts of information.
I have to a custom version of ionic bottom sheet for my current project which is suck to install ionic for just to use the bottom sheet component. here's the link https://ionicframework.com/docs/api/modal#sheet-modal
What does the proposed API look like?
<vant-sheet
:loading="false"
:break-point="[0,1,2]"
title="bottom sheet"
:backdrop="true"
:promptDismiss="true">
<template #header"{close}">
<div class="flex justify-between">
<div>title</div>
<div @click="close()">x</div>
</div>
</template>
body..
<template #footer"{close}">
<div class="w-full">
button
</div>
</template>
</vant-sheet>
Breakpoints: The bottom sheet should have configurable breakpoints to define its expanded, collapsed, and intermediate states.
Vant provides the FloatingPanel component, which can be used to support this.
Programmatic Control: Provide methods to programmatically open or close the bottom sheet, allowing developers to control its behavior based on application logic.
Why not just update the v-model:show
state?
Confirmation on Close: Implement an optional confirmation dialog before closing the bottom sheet, preventing accidental dismissals.
ActionSheet provides a before-close
prop so that you can invoke a dialog before closing.
Responsive Resize: The bottom sheet should automatically adjust its size when the content height changes, ensuring a seamless user experience.
Scrollable Content: Allow the content within the bottom sheet to be scrollable, accommodating varying amounts of information.
I think ActionSheet component already supports these two features.