ionic-framework: feat: sheet modal programmatically move to a breakpoint
Prequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
I have some feature requests for the new v6 Sheet Modal that all kinda belongs to each other:
Auto calculated height
It would be great to make the modal have the height of the content, not more, not less. The library we are currently using (https://github.com/roman-rr/cupertino-pane) has such an option.
Disable Drag Gesture
It would be great do be able to dynamically enable/disable the Drag Gesture
Manual move to Breakpoint
It would be great to be able to have a method on the modal like moveToBreakpoint(), where i can dynamically move to a breakpoint.
Describe the Use Case
These three requests should work all together, image the following use case:
I want to show a Sheet Modal that has only a checkbox and a button below.
This should have the height of the content (Request No 1).
Dragging on this Sheet should be disabled (Request No 2).
If the users selects (or unselects) the checkbox some more content will be shown. After that i want to dynamically move the Breakpoint (Request No 3).
Also this moveToBreakpoint() method should of course accept numbers for the breakpoint, but also accepts something like 'auto' to adjust the height on the current content (which changes with the checkbox)
I hope i described it understandable š
Describe Preferred Solution
No response
Describe Alternatives
No response
Related Code
No response
Additional Information
No response
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 15
- Comments: 20 (13 by maintainers)
Commits related to this issue
- feat(modal): ability to programmatically set current sheet breakpoint (#24648) Resolves #23917 Co-authored-by: Sean Perkins <sean@ionic.io> — committed to ionic-team/ionic-framework by EinfachHans 2 years ago
I created a PR which activates the possibility to do this: #24648
We have plans to implement a
canDismissfeature forion-modalwhich should cover the use cases described here (I.e. not allowing dismiss until a user checkbox a box on the modal). This is being tracked on https://github.com/ionic-team/ionic-framework/issues/22297.In terms of resizing the modal to fit the height, I am not sure that API is a good fit for Ionic since we already expose a
--heightCSS Variable that you can use to adjust the height of the modal dynamically.Being able to programmatically move to a certain breakpoint seems useful, so I can mark that as a feature request. Any updates regarding that feature will be posted on this thread. Thanks!
@MartinR2295 my PR adds also two methods:
ionModalBreakpointWillChange/breakpointWillChangeandionModalBreakpointDidChange/breakpointDidChangeIām facing a use case where I need to change programmatically the modal breakpoint. This feature would be very useful.