Is there good way to show page like iOS modal view on ons-tabbar?

[co3k]

Hi,

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?

[munsterlander]

@co3k Use option C with this thread, now you have lift!

https://community.onsen.io/topic/984/slide-up-animation/6

[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?

[munsterlander]

@co3k I don’t think a PR has been generated for this yet. I do have a repo with a bunch of code samples, but nothing for animations.

I am uncertain if the aforementioned code solution solves what you ask, but from what I understood, it implements near iOS modals.

[Fran Diox]

@co3k I’m not sure if I understood that problem, but let’s try. This example uses an ons-navigator to show a page within a tab. It does not cover the tabbar.

This is another example using a real ons-modal inside a tabbar. You can put an ons-page inside the modal as well. However, it doesn’t have a lift animation yet since we didn’t get the PR.

[Guest]

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.

[co3k]

@Fran-Diox
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-navigator is good because it should show a page within a context (e.g. ons-tabbar).
But I hope that ons-modal show a page within the root context. It cover the entire app because it named “modal”.

[munsterlander]

@co3k Here is an example that covers everything with a tabbar as you requested. https://codepen.io/anon/pen/MbyMMy

[co3k]

@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 .jsx files (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-page element to the static ons-modal (it is placed to the root element) might be worked perfectly, but I hope that the ons-modal is shown without consideration of the current page context.