Is there good way to show page like iOS modal view on ons-tabbar?
I use Onsen UI with react-onsenui.
I want to show ons-page (with ons-navigator) like iOS modal view on ons-tabbar (https://developer.apple.com/ios/human-interface-guidelines/interaction/modality/) but I have no idea to realize it.
Of course, I’ve tried the following ways but these are not perfect solutions.
A. use ons-navigator
- pros: It has “lift” animation. / A new page is displayed perfectly.
- cons: A new page appears from the top of tabbar. This result is not same with iOS modal view.
B. use ons-dialog
- pros: A dialog appears from the bottom of tabbar.
- cons: The default height is 0 in case of the child of ons-dialog is ons-page???
C. use ons-modal
- pros: A new page is displayed perfectly.
- cons: It has no “lift” animation. / A new page appears from the top of tabbar. This result is not same with iOS modal view.
Do you have any ideas?
@co3k Use option C with this thread, now you have lift!
co3k last edited by co3k
@munsterlander Cool! I’m looking forward to try it. Do you have any PRs or branches?
And, does your approach solve “A new page appears from the top of tabbar” problem?
I am uncertain if the aforementioned code solution solves what you ask, but from what I understood, it implements near iOS modals.
This is another example using a real
ons-modalinside a tabbar. You can put an
ons-pageinside the modal as well. However, it doesn’t have a lift animation yet since we didn’t get the PR.
Guest last edited by
Hey folks. I’m the lift modal guy. Sorry…haven’t had a chance to do a PR yet, but will try to get that done tomorrow.
Thanks for your response. These approaches are good for displaying
ons-page, but thease approaches are not like modal view of iOS. iOS shows modal view over the tabbar, but the current Onsen UI implementation might be not.
The following screenshot is the current representation.
I hope that realize a representation like the following screenshot.
I think that the current representation of
ons-navigatoris good because it should show a page within a context (e.g. ons-tabbar).
But I hope that
ons-modalshow a page within the root context. It cover the entire app because it named “modal”.
@munsterlander Thanks! It might be a good quick-hack for me. I’ll choice your approach (with a patch of https://community.onsen.io/topic/984/slide-up-animation/6).
I’m worry a little about this approach that affects maintainability. A page of ons-modal is a highly parent-page-specific thing, so I want to write it within the parent page. (I’m using OnsenUI with react-onsenui and all of
ons-page's are separated into own
.jsxfiles (it is recommended approach of React; https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md))
Creating a my own way of passing a dynamically generated
ons-pageelement to the static
ons-modal(it is placed to the root element) might be worked perfectly, but I hope that the
ons-modalis shown without consideration of the current page context.