Onsen UI

Try to go the root of your project and run the following commands:

npm install
monaca reconfigure
monaca debug

Moreover, which template did you exactly create?

@leorsida You need to toggle swipeable attribute from ons-splitter-side.

@mmike Hi! This is not really related to Onsen UI itself, you should have a look at Cordova plugins like this.

@Moshe-Flam That pen is using CSS from Onsen UI v1.3.11. You are probably using the new one in Monaca IDE. Just update the codepen.

@Moshe-Flam Use CSS: https://css-tricks.com/centering-css-complete-guide/

@mmike cordova.js is generated when you build your app for a specific platform. It will be 404 if it’s not run as an app. You can have a look at Cordova guide for more information.

@czpae86 I don’t understand what you mean, please elaborate a bit more. There is an onPull function that can be used as a hook, but it is in development version, not sure if that’s what you are asking.

@munsterlander @Arrais Swipe, back button and Onsen UI features, in general, would still work (with the mouse). Even you can use ESC key to simulate an device back button (Android) out of the box. The problem is if you want your desktop users to have a device-like app experience instead of a normal website. If you are just redirecting mobile browser users to your "mobile.domain.com" then it should be fine. In fact, you can make PWA with Onsen UI and have access to many device features without Cordova/PhoneGap thanks to the new browser APIs (template for vue-onsenui here).

My suggestion would be using ons.preload whenever possible in order to download pages before pushing them. Otherwise, it would need to wait for the network before performing push animations.

Hi, @vgriffin .

ERROR Error: No provider for OnsNavigator! appears when the component is not a descendant of <ons-navigator>.

Basically, if you want to access ons-navigator, ons-tabbar, ons-splitter, ons-splitter-content and ons-splitter-side, we recommend you creating a service which stores a reference to each component.

Thank you.

Hi, @vgriffin !

This problem is a bug of Onsen UI Core and related to this issue ticket (OnsenUI/OnsenUI#1926).

You can avoid the problem by
(1) Keep the content of <ons-tab> empty and use icon attribute of <ons-tab>.

<ons-tabbar animation="none">
  <ons-tab [page]="initPageComponent" icon="md-home" label="Init page" active badge="7"></ons-tab>
  <ons-tab [page]="pageAComponent" icon="md-settings" label="Page A"></ons-tab>
  <ons-tab [page]="pageBComponent" icon="md-pizza" label="Page B"></ons-tab>
</ons-tabbar>

or
(2) Put <div class="tabbar__content"></div> and wrap the <ons-tab>s with <div class="tabbar"></div>

<ons-tabbar animation="none">
  <div class="tabbar__content"></div>
  <div class="tabbar">
    <ons-tab [page]="initPageComponent" label="Init page" active badge="7">
      <ons-icon icon="md-home" size="24px"></ons-icon>
    </ons-tab>
    <ons-tab [page]="pageAComponent" label="Page A">
      <ons-icon icon="md-settings" size="24px"></ons-icon>
    </ons-tab>
    <ons-tab [page]="pageBComponent" label="Page B">
      <ons-icon icon="md-pizza" size="24px"></ons-icon>
    </ons-tab>
  </div>
</ons-tabbar>

Thank you.