Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Blog
    • Playground
    1. Home
    2. Tags
    3. ons-tabbar

    • M

      Mounting / unmounting react components on tab change
      Onsen UI • react ons-navigator ons-tabbar • • mihail

      1
      0
      Votes
      1
      Posts
      3639
      Views

      No one has replied

    • R

      tabbar issue when app is started in background
      Onsen UI • cordova ons-tabbar android background • • reepeg

      1
      0
      Votes
      1
      Posts
      2722
      Views

      No one has replied

    • M

      Make ons-tabbar swipe on one axis only
      Onsen UI • ons-tabbar swipe • • mlk_nima

      2
      0
      Votes
      2
      Posts
      3344
      Views

      C

      https://community.onsen.io/topic/3030/how-to-reduce-tab-swipe-sensitive-when-scrolling/2 maybe this would help
    • A

      Solved Ons Tabbar animation options not working - React
      Onsen UI • react ons-tabbar animation • • Arrais

      3
      0
      Votes
      3
      Posts
      4472
      Views

      A

      @Fran-Diox Hey, thanks for the answer and I’ll take a look into the new tabbar.
    • P

      Solved Cannot load pages outside of tabbar and navigator
      Onsen UI • ons-navigator ons-tabbar ons-page tabbar navigator • • phyllito

      6
      0
      Votes
      6
      Posts
      8320
      Views

      @phyllito In that tutorial you linked, you can update the code to look like this: <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable animation="push"> And then click Run to see if this is what you want. Per the documents here: https://onsen.io/v2/api/js/ons-splitter-side.html The splitter side now has 3 animations: animation - Specify the animation. Use one of overlay, push, reveal or default. Try those options to get what you want for your project.
    • P

      page.data usage with tabs
      Onsen UI • ons-tabbar ons-tab • • Piotr Mitoraj

      1
      0
      Votes
      1
      Posts
      2776
      Views

      No one has replied

    • ons-tabbar tabs problem on destroy
      Onsen UI • onsen ui monaca ons-tabbar • • quince

      8
      0
      Votes
      8
      Posts
      9847
      Views

      problem is @ www/components/monaca-onsenui/js/angular-onsenui.js:7847 i looked here and in www/components/monaca-onsenui/js/onsenui.js but i don’t have a clue, everything i see is that ‘The loadPage method has been deprecated and will be removed in the next minor version.’ and it looks to me that it might be a problem
    • K

      Hidding tabbar
      Onsen UI • onsen ui ons-tabbar hide • • kukacdav

      12
      0
      Votes
      12
      Posts
      16616
      Views

      K

      @munsterlander Magnificent! Your solution seems to works exactly as I intended. Much appreciate your help!
    • P

      Onsen Tabbar not updating correctly after state change in one tab
      Onsen UI • react ons-tabbar tabbar meteor • • polsat

      1
      0
      Votes
      1
      Posts
      3147
      Views

      No one has replied

    • P

      Unsolved Ons-tabbar not working on ios with onsenui from v2.0.0 - 2.0.2
      Onsen UI • angular 1 onsen2 ons-tabbar ios ons-tab • • Prior Famous Ehichioya

      13
      0
      Votes
      13
      Posts
      13433
      Views

      @Carlos-Mejía Ok, I see now. Can you confirm if this codepen works? https://codepen.io/anon/pen/jMgoQG?editors=1010 The issue with the style that you have, is that the templates are nested inside of an ons-page and therefore they are trying to be rendered. I have moved them outside of that tag and everything appears to be working on my end, but I want to make sure it works on your devices.
    • P

      Unsolved How to implement dynamic ons-tab with ons-lazy-repeat
      Onsen UI • angular 1 onsen ui 2.0 ons-tabbar ons-tab ons-lazy-repeat • • Prior Famous Ehichioya

      4
      0
      Votes
      4
      Posts
      5307
      Views

      P

      @munsterlander Thanks for your reply. Yes indefinite amount of tabs.
    • ons-tabbar
      AngularJS • angular 1 ons-tabbar • • OnsenUI

      1
      0
      Votes
      1
      Posts
      2405
      Views

      No one has replied

    • ons-tabbar
      JavaScript Core • js core ons-tabbar • • OnsenUI

      1
      0
      Votes
      1
      Posts
      2394
      Views

      No one has replied

    • ons-tabbar
      Angular 2 • angular 2 ons-tabbar • • OnsenUI

      5
      0
      Votes
      5
      Posts
      5948
      Views

      @jced-artem There was an issue with the class name, it was renamed from tab-bar to tabbar in recent updates.
    • D

      Navigator inside tabbar
      Onsen UI • ons-navigator ons-tabbar onsenui ons-tab • • davidfherrerar

      7
      0
      Votes
      7
      Posts
      10210
      Views

      @munsterlander That was the way to extend animatinos in v1, but unfortunately it won’t work for v2. @davidfherrerar For Onsen UI 2 right now extending and modifying animators is not an easy task. We still need to make this easier. I’ve made an example with the simple slide animation here. Basically I made a new animator using simple slide’s pop method in the new push method and changing some minor stuff. The problem is that the core animators are written in ES6, but here you would need to write ES5 for the browser, and also right now we can only extend the very basic animator, not an already implemented one. If you really want a pop animation I think right now it would be easier to just delete the pages you don’t need from myNavigator.children HTMLCollection and perform a normal myNavigator.popPage() afterwards. Anyway, just for the record, this is the code for the custom animator: // CUSTOM ANIMATOR var customAnimator = function(options) { options = options || {}; this.timing = options.timing || 'ease'; this.duration = options.duration || 0.4; this.delay = options.delay || 0; var div = document.createElement('div'); div.innerHTML = '<div style="position: absolute; width: 100%; height: 100%; z-index: 2; background-color: black; opacity: 0;"></div>'; this.backgroundMask = div.firstChild; this.blackMaskOpacity = 0.4; }; customAnimator.prototype = Object.create(OnsNavigatorElement.NavigatorTransitionAnimator.prototype); customAnimator.prototype.push = function(enterPage, leavePage, done) { this.backgroundMask.remove(); enterPage.parentNode.insertBefore(this.backgroundMask, enterPage.nextSibling); animit.runAll( animit(this.backgroundMask) .saveStyle() .queue({ opacity: this.blackMaskOpacity, transform: 'translate3d(0, 0, 0)' }) .wait(this.delay) .queue({ opacity: 0 }, { duration: this.duration, timing: this.timing }) .restoreStyle() .queue(done => { this.backgroundMask.remove(); done(); }), animit(enterPage) .saveStyle() .queue({ css: { transform: 'translate3D(-45%, 0px, 0px)', opacity: 0.9 }, duration: 0 }) .wait(this.delay) .queue({ css: { transform: 'translate3D(0px, 0px, 0px)', opacity: 1.0 }, duration: this.duration, timing: this.timing }) .restoreStyle(), animit(leavePage) .queue({ css: { transform: 'translate3D(0px, 0px, 0px)', zIndex: 10000, display: 'block' }, duration: 0 }) .wait(this.delay) .queue({ css: { transform: 'translate3D(100%, 0px, 0px)' }, duration: this.duration, timing: this.timing }) .wait(0.2) .queue(function(finish) { done(); finish(); }) ); }; OnsNavigatorElement.registerAnimator('customAnimator', customAnimator);
    • Unsolved Estoy tratando de hacer una app con monaca ide y onsen ui, donde hay un ons tab bar y quiziera hacer que se desplacen de item tab deslizando la pantalla hacia la izquierda o la derecha.
      Onsen UI • onsen ui monaca ons-tabbar • • Diiego Asenciio

      7
      0
      Votes
      7
      Posts
      7385
      Views

      @argelius , yes i can, but seems Fran Diox was faster :) @Diiego-Asenciio is searching for a Sliding tabbar and i guess , even there is no in Onsen Ui (Nowadays) Material Tabs could be a good option .
    • ons-tabbar
      v1.x • ons-tabbar • • OnsenUI

      3
      0
      Votes
      3
      Posts
      4082
      Views

      @davidfherrerar The “parameter as an option” that you mention is just for the animation and some other information but not for custom data, so in general there is no need to get the parameter back in the new page. You can save data on page’s hide or destroy events and apply it to the new page on init or show events.