Get current breakpoint of Sheet Modal

I have a sheet modal with 3 breakpoints. I want to know which breakpoint it’s currently at because I need to handle the UI slightly different based on that. I can figure this out looking at the pixel offset but I’d rather be able to just know it was half way open or full open. Possible?

Update: Ok I can’t get the pixel offset because of shadow DOM techniques at work. So… really need a way to figure out where I’m positioned besides is-open.

@ldebeasi Any ideas? I think you wrote the component right?

This functionality is coming in a future release of Ionic: feat(modal): ability to programmatically set current sheet breakpoint… · ionic-team/ionic-framework@3145c76 · GitHub

2 Likes

Fantasic! How does one know when it goes out in a release? Will need this the moment it comes out as all workaround options haven’t worked!

If you use Twitter, we will tweet about it: https://twitter.com/ionicframework

Otherwise you can keep an eye on Releases · ionic-team/ionic-framework · GitHub.

We will also have a blog post on https://blog.ionicframework.com/ when this is released.

Hi @ldebeasi, I upgraded @ionic/vue and @ionic/vue-router to 6.1.0 today and restarted my dev server and I’m not able to see the getters or setters. I am seeing deprecation errors about swipeToClose which is new so that makes me think the upgrade happened but for some reason it won’t allow me to access getBreakpoint or setCurrentBreakpoint which I see in @EinfachHans’s pull request.

Am I doing something wrong? See screenshot:

Component methods are not reflected on the Vue component wrapper at the moment. You need to do something like modalRef.value.$el.getCurrentBreakpoint(). This calls the method on the underlying Web Component instance.

See Ionic Troubleshooting Guide: Common Vue App Development Issues for more info.

Awesome. I was able to access the property with a slightly different line of code:
this.$refs.friendModal.$el.getCurrentBreakpoint()

Either way, thanks for making this happen!

1 Like