Inset Modals

[adamdbradley]

• Like inset dialogs vs. full screen dialogs in Material Design
• An option for presenting Modals
• Inset modals should be the default on screens larger than X

[jabas06]

Hi,

Will this feature be like android bottom sheets?

https://www.google.com/design/spec/components/bottom-sheets.html#

[jgw96]

Hey @jabas06. The bottom sheets that you're talking about are more similar to our action sheet: http://ionicframework.com/docs/v2/2.0.0-alpha.40/api/components/action-sheet/ActionSheet/. Good question!

[jabas06]

Yes, I realize.

But what about "Persistent bottom sheets"? Similar to modals but without a backdrop and not fullscreen, so the user can interact with the rest of the content.

https://www.google.com/design/spec/components/bottom-sheets.html#bottom-sheets-persistent-bottom-sheets

It's not clear to me what is this Ionic's feature (Inset Modals) about.

[jgw96]

@jabas06 ahh, so yep this feature is not persistent bottom sheets, but that would be a cool feature. If your interested in seeing that added to the framework potentially feel free to open an issue requesting it as a feature! Inset modals would be like how native modals work on on bigger Android tablets. Currently in native Android on phones a modal takes up full screen but on bigger Android tablets (pixel c, Nexus 9) modals do not take up full screen and start to look almost like alerts but with more content. Hope that explains all this well!

[Mobius77x]

May I request that for the inset modals:

1 - the amount of inset can be specified as both % of the view width and % of the view height to ensure responsiveness of modal dimensions on any device
2 - can be set (via an option?) to always be in the center of the view (for any device), similarly to Loading and Alert.
3 - ability to set the transition so that you can have the modal 'pop up' instead of slide-in from bottom etc.

Thanks!

[mnasyrov]

Is it possible to subscribe to an event when a user click on modal's backdrop in the inset mode? I'd like to have ability to dismiss a modal in this case.