Open sean-perkins opened 2 years ago
And if it is possible to add an event for each change of breakpoitn. I have been looking for this functionality for a week. :)
@Juanjo3299 That feature will be available in 6.1.0. When a breakpoint is modified, either from programmatically changing it or dragging the sheet, ionBreakpointDidChange
will emit with the new breakpoint value.
@sean-perkins Sorry, is there a release date for that version?
@Juanjo3299 6.1 should be released after their current sprint around April 13th
@sean-perkins what would be the preferred solution for the case that the new breakpoints does not include the current one? 🤔
Maybe a method setBreskpoints()
would be better where the user can enter the new breakpoints and the new initalBreakpoint. If the current breakpoint is not included in the new breakpoints the first action would be to animate to the new initalBreakpoint 🤔
@EinfachHans in my initial discovery I explored clamping the value to the nearest available breakpoint: https://github.com/ionic-team/ionic-framework/commit/f08456700246e7b14ef9eb2354bfdd9499a76d74#diff-fe05ef73704648b399bf1ae571ca7b507d02accd5a42ce8081bc9fd778c81ba9R294. If the current breakpoint is still in the list of new breakpoints, the modal would remain in the same location.
This would be my recommendation if we want the breakpoints
property to be reactive, since we could leverage the attributeChangedCallback
to consistently respond to value changes.
Supporting a new public API method could make sense, we would just need to clarify a use case surrounding:
When a modal breakpoints value change and the current breakpoint is not in the new list of breakpoints, I do not want to clamp to the nearest available breakpoint and instead want to clamp to a custom available breakpoint.
I don't think that the nearest breakpoint is the right solution that would work in every case 🤔
An alternative idea to a method would be, that users update the initialBreakpoint
first, for example:
this.modal.initialBreakpoint = 0.4;
this.modal.breakpoints = [0, 0.4, 1];
@sean-perkins Hello, I see that the feature request was opened a year ago. Is there a release date for that version?
still looking for this feature, it would be great to have this option.
Prerequisites
Describe the Feature Request
Sheet modals can have dynamic content within their container. When the content changes, the height of the sheet modal can also change. Sheet modals should offer the ability to the developer, to update the breakpoint values dynamically, so that the sheet modal will both animate to the updated height smoothly as well as the clip point for the breakpoint will respond to the updated height.
Describe the Use Case
Twitter spaces highlights this example perfectly.
When the number of participants in a Twitter space increases, the height of the modal will also increase, changing the breakpoint value:
Describe Preferred Solution
Dynamic breakpoints should happen automatically, with limited customization from the implementer. For example:
Developers should be able to update the value of
breakpoints
at any point once the sheet modal is presented and the sheet modal should respond and update accordingly.Describe Alternatives
Other options have been explored here: https://github.com/sean-perkins/modal-sheet-hans
Related Code
Supporting this internally will require changes similar to: https://github.com/ionic-team/ionic-framework/commit/f08456700246e7b14ef9eb2354bfdd9499a76d74
We will need to safeguard against instances where:
Additional Information
Duplicate feature request as: #24752, with updated use case.