Navigation

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

    • How to use Google's Material Icons?
      Onsen UI • tabbar material design icons • • oaklandGman

      3
      0
      Votes
      3
      Posts
      2120
      Views

      @emccorson thanks for the information! I had been trying to use material.io, fonts.google.com and materialdesignicons.com with no luck. Guess “material design” isn’t really specific to one vendor, and of course, not cross compatible.
    • T

      Two Tabbars? (One segment)
      Onsen UI • tabbar segment help • • thejordancasey

      1
      0
      Votes
      1
      Posts
      1821
      Views

      No one has replied

    • Z

      Prechange tab event is triggered too often
      Onsen UI • tabbar prechange screen orientation • • Zyostes

      3
      0
      Votes
      3
      Posts
      2882
      Views

      Z

      Thank you for your answer. The problem is still here. For information, prechange event is triggered two times when I enter in fullscreen and one time when I leave fullscreen. Another information is that apparently, the problem appears only in iOS.
    • R

      handle oauth Auth0 callback in onsen react
      Onsen UI • react tabbar navigator login authentication • • rockodragon

      1
      0
      Votes
      1
      Posts
      2531
      Views

      No one has replied

    • P

      Unsolved Tabbar SetActiveTab from button in page
      Onsen UI • tabbar angular2+ tabactive • • philheslop

      1
      0
      Votes
      1
      Posts
      2366
      Views

      No one has replied

    • M

      Movable tabbar
      Onsen UI • tabbar • • Michael Hartung

      1
      0
      Votes
      1
      Posts
      2089
      Views

      No one has replied

    • ?

      Solved ons-tabbar lift animation
      Onsen UI • tabbar animation • • Guest

      4
      0
      Votes
      4
      Posts
      4354
      Views

      @CsLaci Perhaps you can use a <ons-modal animation="lift"> for your use case.
    • 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
      8347
      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.
    • ?

      Solved Onsen React with Tabs and Navigator on Android
      Onsen UI • react tabbar android toolbar • • Guest

      9
      0
      Votes
      9
      Posts
      9587
      Views

      ?

      @Fran-Diox Think you’re right. I’ll just park the tab bar at the bottom on Android. Little strange, but probably not as strange as what I was originally envisioning. Thanks for the help!
    • S

      Warning of 'key' for Tabbar
      Onsen UI • react tabbar • • semix

      2
      0
      Votes
      2
      Posts
      3238
      Views

      A

      The answer from here worked for me to solve this exact warning: https://github.com/OnsenUI/react-onsenui/issues/107 You need to add the key property to both content and tab, like this: { content: <MyTab title="Settings" key={2} />, tab: <Ons.Tab label="Settings" key={2} /> } This solved the warning for me.
    • 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
      3165
      Views

      No one has replied

    • Tabbar
      React • react tabbar • • OnsenUI

      5
      0
      Votes
      5
      Posts
      5398
      Views

      I

      @ephraimt @munsterlander I am not sure that this demo actually works the way it is described. The initial active tab is being set correctly through index. However, if you setState in the prechange to always be index 0 you can still swap between the tabs. In my application I can get the tabbar to be a “controlled” component, it always selects the tab you click. This looks like it is happening on the internal onClick method of ons-tabbar that is overriding the setActiveTab method in the React component.
    • T

      Unsolved Hide Bars (Tab Bar and Toolbar) On Scroll
      Onsen UI • tabbar toolbar scroll hide • • tbrcrl

      5
      0
      Votes
      5
      Posts
      8287
      Views

      @tbrcrl As the others mentioned we aren’t sure if and when a feature like this may be added to the core. In the meantime feel free to use something like this. It’s just a basic demo showing some minor tweaks in classes and styles. It may depend on your app, but I think something like it should be sufficient for most basic cases. Looking at the behaviour of skype and youtube android apps it seems there are minor differences. In both you can actually drag the toolbar between being shown or not and when you stop dragging it chooses its preferred state. To implement the dragging part you would need to listen for start, movement and end of the drag. So in order to keep things relatively simple I omitted that logic and only made 2 states with a small transition between them. As for hiding the tabbar menu - in both apps the tabs would always persist regardless of the circumstances, so maybe you shouldn’t try to hide yours. If you still want to the logic would be similar to what is shown in the upper example. Also the example shows js logic on the scroll event - if you just want a simple solution without any code in which the toolbar scrolls as if it’s part of the content then you can just add the attribute inline to it and you’re good to go.