Navigation

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

    • N

      What's wrong? My ons-popover doesn't show up [AngularJS]
      Onsen UI • onsenui ons-popover angularjs 1 • • naufal17

      1
      0
      Votes
      1
      Posts
      364
      Views

      No one has replied

    • Unsolved OnsenUI React + jQuery Touch Punch conflict.
      Onsen UI • onsenui jquery conflict draggable touch-punch problem jquery-touch-punch drag-drop • • Paweł Wojtaszko

      2
      0
      Votes
      2
      Posts
      3235
      Views

      @Paweł-Wojtaszko There is currently a compatibility issue with some drag-related libs. Check this topic for more info https://community.onsen.io/topic/2989/unable-to-disable-ons-splitter-side-gesture-detector
    • D

      Problem requesting fonts in OnsenUI/vue-cordova-webpack template
      Onsen UI • onsenui webpack templates fonts node • • denious

      5
      0
      Votes
      5
      Posts
      7417
      Views

      @denious Good to read that. I think '/' should be more robust for development so I just updated it :+1:
    • I

      Push notification with free plan
      Monaca Tools • monaca onsen ui 2.0 onsen2 monaca cli onsenui monaca power plugins • • iagor123

      6
      0
      Votes
      6
      Posts
      7843
      Views

      @joe-root That’s because there isn’t one. If you follow the second link, it walks you through with screenshots, exactly what to do.
    • Preview! Vue.js support for Onsen UI
      News & Announcements • onsenui vue.js • • argelius

      15
      0
      Votes
      15
      Posts
      15814
      Views

      @Ati @munsterlander So far I’ve been fixing and implementing other stuff but I just joined Vue 2 bindings development and will continue until it’s finished. I cannot say any date but well, right now we are 2 developers working on this :) If you want to see changes, check Vue 2 PRs.
    • Getting Started with Meteor and Onsen UI
      Monaca & Onsen UI Articles • react onsenui meteor • • Fran Diox

      14
      0
      Votes
      14
      Posts
      16324
      Views

      M

      @Fran-Diox thx!
    • D

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

      7
      0
      Votes
      7
      Posts
      10255
      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);
    • Real time Chat App with OnsenUI and Horizon!
      Monaca & Onsen UI Articles • react onsenui mobx rethinkdb horizon chat • • argelius

      9
      0
      Votes
      9
      Posts
      11489
      Views

      P

      Cảm ơn bạn….
    • T

      What are the extra input elements does onsenui contain?
      Onsen UI • onsen2 onsenui vanilla js onsen1 • • Taymindis

      3
      0
      Votes
      3
      Posts
      5004
      Views

      Hi @Taymindis. With Onsen UI you can still use anything from html5, so don’t worry about those. For extra provided elements we have a few: ons-button ons-range ons-switch ons-fab (Floating Action Button) ons-input - wrapper for multiple types of <input> (including checkbox and radio etc) You could also checkout this section of the guide. And finally while they may not be form elements you may be also interested in: ons-ripple ons-icon ons-progress-bar ons-progress-circular Also it is possible that I missed something, which is why @Fran-Diox gave you a link to the whole reference :)
    • Creating a Cordova Hybrid App with React, Redux and Webpack
      Monaca & Onsen UI Articles • react cordova tutorial onsenui webpack redux • • argelius

      15
      0
      Votes
      15
      Posts
      20457
      Views

      R

      AFAICS this example is using OnsenUI 2.0.4 and Webpack v1.x.x . Can either of these be upgraded and if so how? Especially interested in what happens to Stylus (replaced by Less?) Or is there an up to date example available?
    • Angular 2 for Onsen UI is here! 🚀
      News & Announcements • angular 2 onsenui components beta • • argelius

      5
      0
      Votes
      5
      Posts
      7032
      Views

      @Fran-Diox yes. I’m fast like onsen ui :bullettrain_side: :bullettrain_side: :bullettrain_side: :bullettrain_side:
    • Time Travel in React Redux apps using the Redux DevTools
      Monaca & Onsen UI Articles • react tutorial onsenui webpack redux time-travel • • argelius

      4
      0
      Votes
      4
      Posts
      6185
      Views

      S

      yes that is it
    • P

      Improving Your Development Workflow with Webpack, React Hot Loader and Onsen UI
      Monaca & Onsen UI Articles • react tutorial onsenui webpack hot-reloading • • patrick

      3
      0
      Votes
      3
      Posts
      5055
      Views

      C

      Would be good if you put the files tree and file names for each file. Except that, colors is not recognized anymore by webpack v2 in devServerschema and we now have to use babel-loader instead of babel. Other than that, still one of the best tutorials out there for using webpack-dev-server with Hot Module Replacement.