Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Overview

Forum TypeScript definitions
Circle CI NPM version CDNJS

Onsen UI - Cross-Platform Hybrid App and PWA Framework

Onsen UI is an open source framework that makes it easy to create native-feeling Progressive Web Apps (PWAs) and hybrid apps.

The core library is written in pure Javascript (on top of Web Components) and is framework agnostic, which means you can use it with your favorite framework and its tools. We provide some extra binding packages to make it easy to use Onsen UI's API with many popular frameworks:


React

Angular 2+


Vue


AngularJS 1.x

Some other frameworks are supported by community packages (not tested or implemented by the core team): Aurelia, EmberJS.

Both flat (iOS) and Material (Android) designs are included. The components are optionally auto-styled based on the platform, which makes it possible to support both iOS and Android with the same source code.

Getting started

We have several resources to help you get started creating hybrid apps and PWAs with Onsen UI:

Get Onsen UI

Download the latest released version

We have a distribution repository with changelog. Onsen UI is also available in npm, bower and jspm. Example:

npm install onsenui

This downloads the core Onsen UI library. To install bindings, you can install react-onsenui, vue-onsenui, ngx-onsenui or angularjs-onsenui.

Download or request from a CDN

You can also take the necessary files from a CDN. Some of the options are unpkg, jsDelivr and cdnjs.

Get the latest development build

Optionally, you can download the latest development build here. Be careful, usually everything there is already tested but it might be unstable sometimes.

Examples with source code

There are lots of sample applications written using Onsen UI. Here are some examples with source code and tutorials to give you an idea of what kind of apps you can create.

Onsen UI ecosystem

Because sometimes a UI framework may not be enough to make hybrid app development easy, Onsen UI comes with a complete ecosystem of well integrated tools. Meet Monaca.

Developed by the Onsen UI team, Monaca is a toolkit that makes hybrid mobile app development with PhoneGap / Cordova simple and easy: Onsen UI Cordova templates, debugging suite, push notifications, remote build, back-end solutions, encryption, version control, continuous integration and more. Furthermore, it provides multiple development environments with everything already configured and ready to go:

Cloud IDE - Command Line Interface - Localkit GUI

Example with CLI:

$ [sudo] npm -g install monaca
$ monaca create helloworld # And choose the starter template
$ monaca preview # Preview on the browser
$ monaca debug # Preview on a real device
$ monaca remote build --browser # Production build on the cloud

See the Onsen UI Getting Started Page for more information.

Browser Support

Onsen UI is tested to work with the following browsers and mobile OS.

  • Android 4.4.4+
  • iOS 9+
  • Chrome
  • Safari

Contribution

We welcome your contribution, no matter how big or small! Please have a look at the contribution guide for details about project structure, development environment, test suite, code style, etc. All the version updates are mentioned in the changelog.

Comments
  • Open sliding menu should not propagate any events to open page

    Open sliding menu should not propagate any events to open page

    Hi @argelius,

    when sliding menu is open, no scroll, no touch etc should be propagated to the page when menu < 100%. This should be like the native behavior. If you don't want to block this automatically maybe you could provide a lockPage() method, so that no events (even scroll) be triggered. To demonstrate my problem, I want to share this video with you. As you can see, I have some touch move ng-slide-left actions on the page which will block and stop the sliding menu from closing properly when I drag in the page frame.

    http://youtu.be/bDoW4q-2Zs0

    Hope you get my point.

    Regards Hirbod

    opened by hirbod 33
  • Weird 1px line above status bar on iPhone

    Weird 1px line above status bar on iPhone

    I keep coming across this issue and I haven't been able to find a cause of it.

    See these images....

    screen shot 2014-11-20 at 11 47 41 screen shot 2014-11-20 at 11 47 46

    The first one is my status bar on initial page load (notice the 1px grey-ish line). The second one is after I have swiped to active the swipe menu.

    It seems to happen on some pages but not others, but i can't find any consistency of when it happens or what is causing it.

    The only way i have managed to "fix" this at the moment is by adding the follow CSS

    .page {
        top: -1px;
    }
    

    Any ideas?

    iPhone 6, iOS 8.1.1, OnsenUI 1.2.0

    opened by GC-Mark 24
  • add Android back button support for Navigator

    add Android back button support for Navigator

    Navigator should popPage by default when back button is clicked.

    To prevent that behavior, user can use the event.stopPropagation()

    Things to confirm:

    -The order of the event registration could affect the propagation. -The event propagation is for element, in this case, we are dealing with physical back button which doesn't have parent/child relationship

    opened by kruyvanna 24
  • Angular2 | Splitter issue: Error throw when collapse and swipeable

    Angular2 | Splitter issue: Error throw when collapse and swipeable

    Environment

    [Core]
      onsenui latest
      
    [Framework]
      angular2 2.0.0
    
    [Framework binding]
     angular2-onsenui latest
    
    [Platform]
      Desktop - OS X 10.12.0 64-bit
    
    [Browser]
      Desktop - Chrome 56.0.2924.87 on OS X 10.12.0 64-bit
    

    Encountered problem When using collapse and swipeable attributes the splitter-side throws a console error.

    How to reproduce See the tutorial link.

    Demo link

    • HTML
    <app></app>
    
    • JS
    import {
      Component,
      OnsenModule,
      NgModule,
      CUSTOM_ELEMENTS_SCHEMA
    } from 'angular2-onsenui';
    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
    
    @Component({
      selector: 'ons-page',
      template: `
        <ons-toolbar>
          <div class="center">Content Page</div> 
        </ons-toolbar>
        <div class="content">
          
        </div>
      `
    })
    class ContentPageComponent {
    }
    
    @Component({
      selector: 'ons-page',
      template: `
        <ons-toolbar>
          <div class="center">Left Page</div> 
        </ons-toolbar>
        <div class="background"></div>
        <div class="content">
          
        </div>
      `
    })
    class SidePageComponent {
    }
    
    @Component({
      selector: 'app',
      template: `
      <ons-splitter>
        <ons-splitter-side [page]="sidePage" side="left" width="200px" style="border-right: 1px solid #ccc" collapse swipeable>
        </ons-splitter-side>
    
        <ons-splitter-content [page]="contentPage">
        </ons-splitter-content>
      `
    })
    export class AppComponent {
      sidePage = SidePageComponent;
      contentPage = ContentPageComponent;
    }
    
    @NgModule({
      imports: [OnsenModule],
      declarations: [AppComponent, SidePageComponent, ContentPageComponent],
      bootstrap: [AppComponent],
      entryComponents: [SidePageComponent, ContentPageComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    class AppModule { }
    
    platformBrowserDynamic().bootstrapModule(AppModule);
    
    opened by adamkozuch 20
  • ng-click inside of dialog

    ng-click inside of dialog

    Hi @argelius,

    seems like the dialog directive creates an isolated scope. How can I access the parent scope to invoke some click actions? (for example, I've created a login dialog and all my controller related stuff is in my LoginController, e.g. Facebook-Login, but my functions don't trigger in the dialog.

    Any fast solution for me?

    opened by hirbod 20
  • when pushPage is fired in rapid succession

    when pushPage is fired in rapid succession

    When i click one button(in page1) to push a new page(page2), just after the next page(page2) is indicated, click the button's position(Even though page1 is already hidden) once again in rapid succession on the second page(page2). the second page(page2) would be push to page stack two times. May be this is onsenui's bug?

    Sorry for my poor english.

    opened by woyehenni 20
  • Action sheet

    Action sheet

    @misterjunio @asial-matagawa Please have a look at this and test it on Safari. For the "notification-like" method, what do you think it's better? ons.notification.action(...)? ons.actionSheet(...)?

    opened by frandiox 17
  • ons-tabbar inserts duplicated pages on iOS / mobile Safari

    ons-tabbar inserts duplicated pages on iOS / mobile Safari

    Reported by @iqmeta in #1580.

    Also there is a new tab-bar problem with iOS / mobile Safari, on Chrome it's working fine:

    document.addEventListener('init', function (event)
    {
      var page = event.target;   
      console.log("init:" + page.id);
    }
    

    Chrome console is correct:

    init:tabBar
    init:menu
    init:gruppenPage
    init:home
    

    On iOS gruppePage is added 3x times:

    init:menu
    init:gruppenPage
    init:gruppenPage
    init:gruppenPage
    init:home
    

    Markup Tabbar no where else in code gruppen.html was referenced

     <ons-tabbar id="tabs" animation="slide">
            <ons-tab active page="home.html" id="alarm">
                <div class="tab-bar__icon">
                    <ons-icon icon="ion-ios-bell" size="33px" style="line-height:0px"></ons-icon>
                </div>
            </ons-tab>
            <ons-tab id="gruppen" page="gruppen.html">
                <div class="tab-bar__icon">
                    <ons-icon icon="ion-radio-waves" size="33px" style="line-height:0px"></ons-icon>
                </div>
            </ons-tab>
    </ons-tabbar>
    

    gruppen.html

    <ons-page id="gruppenPage">
        <div id="testX">X</div>
        <ons-list id="groupList">
        </ons-list>
    </ons-page>
    
    tabs.addEventListener('postchange', function(event)
    {
      $("#textX").text("Y") <= works only on chrome. on iOS not! because tabBar added 3 times the gruppenPage.html. Th
    }
    
    

    Screenshot from Cordova Remote Debugger image

    Going back to R17 for now. There this works flawless ;-) Hope this helps a bit. Great work on onsen by the way :+1: .

    Update: With R17 i have double inits with splitter too: image

    think these are back or still present:

    https://community.onsen.io/topic/605/init-called-twice-on-one-page-after-updating-to-rc16/

    https://github.com/OnsenUI/OnsenUI/issues/1400

    opened by asial-matagawa 17
  • If ng-controller is set in ons-page, the scope is not inherited

    If ng-controller is set in ons-page, the scope is not inherited

    If you do < ons-page ng-controller="MyCtrl" >, the scope created by the ons-page directive is a sibling of MyCtrl - so it doesn't inherit MyCtrl's scope.

    The workaround is to do:

    <div ng-controller="MyCtrl">
    <ons-page> </ons-page>
    </div>
    

    Or:

    <ons-page > 
    <div ng-controller="MyCtrl">
    </div>
    </ons-page>
    

    It's a bit ugly... :)

    opened by JoaoSaleiro 17
  • toolbar._getToolbarLeftItemsElement is not a function

    toolbar._getToolbarLeftItemsElement is not a function

    vue:2.4.4 vue-onsenui:2.2.1 onsenui:2.6.1

    when i use this.$store.commit("navigator/push", page) i have <v-ons-toolbar> in my page,but still show me the "toolbar._getToolbarLeftItemsElement is not a function", what i miss? (sorry for my english)

    opened by baixiaoyu2997 16
  • Onsen2: Toolbar too close to iOS statusbar

    Onsen2: Toolbar too close to iOS statusbar

    Hi there!

    I'm using Onsen2 beta. When using Onsen2 on iOS, the toolbar is too close to the native statusbar: image

    This was not an issue with Onsen 1.x.

    Best, Henrik

    opened by luposlip 16
  • Warning

    Warning "Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform"

    In my Capacitor app I am getting this warning using vscode Ionic extension:

    Warning "Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform"

    It is not a problem for me at this moment.

    A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced. To fix this issue, replace the usage of navigator.userAgent, navigator.appVersion, and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData. Note that for performance reasons, only the first access to one of the properties is shown.

    Affected resources: onsenui.min.js:1

    Environment

    Onsen UI Version: latest

    Framework: Capacitor / OnsenUI

    Framework binding:

    Additional libraries:

    Platform: Google PIXEL 6 emulator with Android 13/API 33

    opened by wimZ 0
  • React navigation usage issue

    React navigation usage issue

    Hello i am trying to use tabbar and navgation in app js but i was unable to i am getting error that navigator is undefined

    import React from 'react';
    import ReactDOM from 'react-dom';
    import {Tabbar, Tab, Navigator} from 'react-onsenui';
    
    import HomePage from './HomePage';
    import SettingsPage from './SettingsPage';
    import '../www/style.css'
    import IntroPage from './IntroPage';
    import SignUpPage from './SignUpPage';
    import LoginPage from './LoginPage';
    
    export default class App extends React.Component {
      renderPage(route, navigator) {
        const props = route.props || {};
        props.navigator = navigator;
    
        return React.createElement(route.component, props);
      }
      
      renderTabs() {
        return [
          {
            content: <HomePage />,
            tab: <Tab label='Discover' className='tabs' icon='md-search' />
          },
          {
            content: <SignUpPage />,
            tab: <Tab label='Wishlist' className='tabs' icon='ion-ios-heart' />
          },
          {
            content: <LoginPage />,
            tab: <Tab label='Store' className='tabs' icon='md-store' />
          },
          {
            content: <SettingsPage />,
            tab: <Tab label='Profile' className='tabs' icon='md-account' />
          }
        ]
      }
      render() {
        return (
          <>
          <Tabbar   initialIndex={0} renderTabs={this.renderTabs.bind(this)} />
          <Navigator initialRoute={{component: MainPage}} renderPage={this.renderPage} /> 
          </>
        );
      }
     
    }
    
    opened by divinec0de 0
  • Vue3 | InstallTrigger is deprecated and will be removed in the future

    Vue3 | InstallTrigger is deprecated and will be removed in the future

    Environment

    Onsen UI Version: 2.12.6

    Framework: Vue 3.2.45

    Framework binding: vue-osenui 3.0.0

    Additional libraries: n/a

    Platform: MacOS Firefox

    Encountered problem When calling VueOnsen.platform.isFirefox(), I get the warning InstallTrigger is deprecated and will be removed in the future.

    How to reproduce Call VueOnsen.platform.isFirefox() in main.js.

    opened by codecat 0
  • How to override default font set by onsen-css-components.css ?

    How to override default font set by onsen-css-components.css ?

    The font for my H1 element in the following page structure is being overridden by OnsenUI CSS and I can't figure out why or how to override it successfully:

    <div class="page__content page--material__content">
    	<div id="cmbcontent" class="source-serif-pro-font-light">
                     <h1 style="color: rgb(99, 81, 109);">My text here</h1>
    

    etc.

    My index.css file includes the following rule for the font, and is included after onsen CSS in my HTML file.

    .source-serif-pro-font-light { 
        font-family: 'Source Serif Pro Light', serif;
        font-weight: 300;
        font-style: normal;
    }
    

    In my code I use JQuery to set the font: $('#cmbcontent, #cmbcontent h1, #cmbcontent h3').addClass('source-serif-pro-font-light'); and I've confirmed by inspection that it's then set on those elements but it's being overridden by rules for ".page--material__content h1" and/or ".page__content h1" in onsen-css-components.css (I'm using the .min version) Even doing $('#cmbcontent > h1').addClass('source-serif-pro-font-light'); or $('#cmbcontent > h1').css('font-family', "'Source Serif Pro Light', serif;");doesn't work, and yet I think these should as my understanding is more specific CSS rules override less specific ones.

    This is happening using OnsenUI 2.11.2 in Chrome (latest version) launched from Microsoft Cordova Tools in VSCode on Windows 10.

    Any suggestions please? Thanks

    opened by ajck 0
  • React | Range component bubble not being reset to initial state if dragged

    React | Range component bubble not being reset to initial state if dragged

    Environment

    [Core]
      onsenui latest
      
    [Framework]
      react 18.2.0
    
    [Framework binding]
     react-onsenui latest
    
    [Platform]
      Desktop - Windows 10 64-bit
    
    [Browser]
      Desktop - Chrome 108.0.0.0 on Windows 10 64-bit
    

    Encountered problem

    How to reproduce

    Demo link

    • HTML
    <div id="app"></div>
    
    • JS
    class MyPage extends React.Component {
      state={
        weight:0
      }
      handleClick() {
        // ons.notification.alert('Hello world!');
        this.setState({
          weight:0
        })
      }
    
      renderToolbar() {
        return (
          <Ons.Toolbar>
            <div className='center'>My app</div>
          </Ons.Toolbar>
        );
      }
    
      render() {
        return (
          <Ons.Page renderToolbar={this.renderToolbar}>
            <Ons.Button onClick={this.handleClick}>
              Click me!
            </Ons.Button>
                    <Ons.Range
              name="weight"
              // modifier="material"
              min={0}
              max={50}
              value={this.state.weight}
              onChange={(event) => { 
                
                this.setState({ weight: parseInt(event.target.value) }) 
              }}
            />
          </Ons.Page>
        );
      }
    }
    
    ons.ready(function() {
      const root = ReactDOM.createRoot(document.getElementById('app'));
      root.render(<MyPage />);
    });
    
    opened by Softkeydel 0
  • Vue2 | Range issue: v-model does not working

    Vue2 | Range issue: v-model does not working

    Environment

    [Core]
      onsenui latest
      
    [Framework]
      vue 2.7.1
    
    [Framework binding]
     vue-onsenui legacy
    
    [Platform]
      Desktop - OS X 10.15.7 64-bit
    
    [Browser]
      Desktop - Chrome 108.0.0.0 on OS X 10.15.7 64-bit
    

    Encountered problem

    The bound variable does not change by the slider value changes.

    How to reproduce

    volume is always 25 (initial value) in this demo.

    Demo link

    • HTML
    <template id="main">
      <v-ons-page>
        <v-ons-toolbar>
          <div class="center">Range</div>
        </v-ons-toolbar>
    
        <v-ons-list>
          <v-ons-list-item>
            Adjust the volume:
            <v-ons-row>
              <v-ons-col width="40px" style="text-align: center; line-height: 31px;">
                <v-ons-icon icon="md-volume-down"></v-ons-icon>
              </v-ons-col>
              <v-ons-col>
    
                <v-ons-range v-model="volume" style="width: 100%;"></v-ons-range>
    
              </v-ons-col>
              <v-ons-col width="40px" style="text-align: center; line-height: 31px;">
                <v-ons-icon icon="md-volume-up"></v-ons-icon>
              </v-ons-col>
            </v-ons-row>
            Volume: {{ volume }} <span v-show="Number(volume) > 80">&nbsp;(careful, that's loud)</span>
          </v-ons-list-item>
        </v-ons-list>
      </v-ons-page>
    </template>
    
    <div id="app"></div>
    
    • JS
    new Vue({
      el: '#app',
      template: '#main',
      data() {
        return {
          volume: 25
        };
      }
    });
    
    opened by K-KOYANAGI 2
Releases(2.12.8)
  • 2.12.8(Dec 27, 2022)

  • 2.12.7(Dec 27, 2022)

  • 2.12.6(Oct 17, 2022)

  • 2.12.5(Oct 13, 2022)

  • 2.12.4(Oct 13, 2022)

  • 2.12.3(Sep 28, 2022)

    New Features

    • ons-popover: Add target attribute and property. Fixed (#3003).

    Bug Fixes

    • ons-navigator: reject proper message (404) when push none existing page. Fixed (#2964).
    • css: Use valid CSS in calc function. PR (#2691)
    Source code(tar.gz)
    Source code(zip)
  • 2.12.2(Jul 25, 2022)

  • 2.12.1(Jul 1, 2022)

    Bug Fixes

    • ons-alert-dialog: User's onDeviceBackButton setting is no longer ignored when connecting element.
    • ons-splitter-side: Fix options.animation being ignored.
    • ons-list-item: Wait until content is ready before expanding list item when expanded is set.

    New Features

    • ons-speed-dial: Added open attribute and property.
    • ons-speed-dial: Added ripple property.
    • ons-list-item: Added expandable property.
    • ons-list-item: Added tappable property.
    • ons-list-item: Added lockOnDrag property.
    • ons-list-item: Added animation property.
    • ons-list-item: Added tapBackgroundColor property.
    • ons-ripple: Added center property.
    • ons-icon: Added fixedWidth property.
    • ons-icon: Added spin property.
    • ons-carousel: Added fullscreen property.
    • ons-carousel: Added autoRefresh property.
    • ons-fab: Added ripple property.
    • ons-input: Added float property.
    • ons-popover: Added coverTarget property.
    • ons-pull-hook: Added fixedContent property.
    • ons-speed-dial-item: Added ripple property.
    • ons-tabbar: Added tabBorder property.
    • ons-tabbar: Added animationOptions property.
    • ons-toolbar: Added static property.
    • ons-input: type property is now settable.
    • ons-navigator: Added swipe event.
    • ons-navigator: Added animationOptions property.
    • ons-splitter-side: Added animationOptions property.
    • ons-splitter-side: Added swipe event.
    Source code(tar.gz)
    Source code(zip)
  • 2.12.0(Apr 10, 2022)

    BREAKING CHANGES

    • ons-list-item: expanded class has been renamed to list-item--expanded.
    • ons-tab: Setting onClick no longers prevents default behaviour. event.preventDefault should be called in the onClick callback.
    • ons-back-button: Setting onClick no longers prevents default behaviour. event.preventDefault should be called in the onClick callback.
    • ons-speed-dial: Setting onClick no longers prevents default behaviour. event.preventDefault should be called in the onClick callback.
    • core: The ES modules are now distributed in ES6 instead of transpiled ES5. If you need to support ES5, you should transpile the contents of the esm directory.
    • core: Bundlers will now use the ES modules version of Onsen UI by default instead of the UMD version.
    • The TypeScript declaration file has been moved to esm/onsenui.d.ts.
    • ons-template: ons-template has been removed. Use template instead.

    Bug Fixes

    • ons-splitter-side: Stop creating new swipe reveals when connected if one already exists.
    • core: DOMContentReady and deviceready event listeners are removed after being invoked once. (#2886).
    • ons-button: Allow form submission on submit key keypress. (#2857).
    • ons-list-item: Clicks are ignored while the expandable list item is expanding/contracting.
    • ons-button, ons-alert-dialog-button, ons-toolbar-button, ons-action-sheet-button: Ensure ons-ripple is imported when button is imported.
    • ons-dialog, ons-alert-dialog, ons-modal, ons-popover, ons-action-sheet: dialog-cancel event is renamed to dialogcancel.
    • ons-action-sheet: Hide title element when title is null or undefined.
    • ons-splitter-side: Fix error being thrown when animation-options attribute is set.
    • ons-popover: Use regular function instead of arrow function to stop default animation breaking.
    • ons-select: Remove ons-select element when remove is called with no arguments.

    New Features

    • ons-tabbar: swipe event is now emitted when the tabbar swipes.
    • ons-carousel: swipe event is now emitted when the carousel swipes.
    • ons-pull-hook: pull event is now emitted when the pull hook is pulled.
    • ons-tab: Calling event.preventDefault for click events can be used to prevent switching tab.
    • ons-back-button: Calling event.preventDefault for click events can be used to prevent navigator going back a page.
    • ons-speed-dial: Calling event.preventDefault for click events can be used to prevent speed dial opening/closing.
    • ons-splitter-side: Added swipeable property.
    • ons-list-item: Added expandable attribute and property. (#2896).
    • ons-list-item: Added expand event that fires when an expandable list item is clicked and expands or contracts.
    • ons-button: Added ripple property to mirror existing ripple attribute.
    • ons-dialog, ons-alert-dialog, ons-modal, ons-popover, ons-action-sheet: Added visible attribute.
    • ons-dialog, ons-alert-dialog, ons-modal, ons-popover, ons-action-sheet: Can now be shown or hidden by setting the visible property/attribute.
    • ons-dialog, ons-alert-dialog, ons-popover, ons-action-sheet: Added maskColor property.
    • ons-alert-dialog, ons-toast, ons-modal, ons-dialog, ons-action-sheet, ons-popover: Added animationOptions property.
    • ons-action-sheet: Added title property to mirror existing title attribute.
    • ons-carousel: Added animationOptions property.
    • ons-carousel: Added active-index attribute and activeIndex property.
    • ons-segment: active-index can now be set at any time, not just during initialization. Also added corresponding activeIndex property.
    • ons-tabbar: Added hideTabs property.
    • ons-tabbar: Added activeIndex property. The active tab can now be changed by setting either the active-index attribute or the activeIndex property.

    Misc

    • Support for bower has been dropped. (#2924).
    • The ES modules are now distributed as unbundled ES6 instead of bundled ES5. (#2731).
    • module key has been added to package.json. Bundlers will now use the ES modules version of Onsen UI by default instead of the UMD version.
    • The TypeScript declaration file has been moved to esm/onsenui.d.ts.
    • The CSS components source has been moved to css/css-components-src.
    • The paths to all components have been standardized. For ESM imports use import onsenui/esm/elements/<component-name>.js for all components.
    Source code(tar.gz)
    Source code(zip)
  • 2.11.2(Jan 12, 2021)

    Bug Fixes

    • ons.platform: isIOS now returns true for iPadOS. (#2804).
    • ons.platform: Only prompt input cursor for supported input types. (#2803).
    • core: Fix animations not working for platform-specific animations.
    • ons-fab: Fix fab not being positioned relative to tab page. (#2810).
    • core: Fix setImmediate not defined for ESM bug.
    • ons.platform: isIPhoneX now works for iPhone 11 and 12 variants. (#2811).

    New Features

    • core: Add blur and focus methods for input elements. (#2809).
    Source code(tar.gz)
    Source code(zip)
  • 2.11.1(Sep 23, 2020)

  • 2.11.0(Sep 23, 2020)

    Bug Fixes

    • ons-input: Add spellcheck to list of attributes passed to inner input. (#2706).
    • ons.notification: Fix prompt callback not running when submitOnEnter is false. (#2618).
    • ons-tab: Fall back to icon if active-icon not set when updating button content. (#2720)
    • ons-fab: Stop fab scrolling with viewport when wrapped in another element. (#2778)
    • ons.notification: Resolve toast when hide is called before timeout. (#2755)
    • ons-navigator: Fix navigator still running when non-existent page is pushed. (#2740)
    • core: Fix status-bar-fill not being automatically set on iPadOS. (#2745)
    • core: Fix isIPad returning false on iPadOS. (#2621)
    • ons-carousel: Fix wrong active index being set on resize for carousels with items narrower that the screen width. (#2738)
    • ons-navigator: Fix bug where entry page data contains leave page data in postpop. (#2575)
    • ons-navigator: Fix pushPage's callback being called by popPage. (#2761)
    • ons-carousel: Fix carousel not swiping when inside modal on iOS. (#2572)

    BREAKING CHANGES

    • UIWebView is no longer supported. FastClick is also removed.
    • ons-navigator: If options are not set for popPage, it no longer defaults to the options set when the page was pushed.
    Source code(tar.gz)
    Source code(zip)
  • 2.10.10(Jul 29, 2019)

  • 2.10.9(Jul 25, 2019)

    Bug Fixes

    • ons-tab: Show active-icon for initially active tab in Angular 2+. (#2656).

    Misc

    • Upgrade Font Awesome to v5.8.1
    • Upgrade Ionicons to v4.5.5
    • Upgrade Material Design icons to v2.2.0
    • Stop fonts being included in onsenui-core.css
    Source code(tar.gz)
    Source code(zip)
  • 2.10.8(Apr 1, 2019)

    Misc

    • Fix bug in gulpfile where core was signalling completion too early.
    • Fix bug in gulpfile where distribution CSS files were output to the wrong directory.
    Source code(tar.gz)
    Source code(zip)
  • 2.10.7(Mar 31, 2019)

    Bug Fixes

    • ons-icon: Compile when content is ready. (#2547).
    • ons-icon: Fix bug where Font Awesome v5 styles (far, fal, fab) were being ignored.
    • ons-navigator: Fix bringPageTop not working if a page is defined inside ons-navigator tags.
    • ons-tab: Stop recreating tabs when page with tabbar is brought to top of navigator stack. (#2604).
    • ons-fab: Fix toggled/hidden fab reappears when you leave and return to its page bug. (#2558).

    Misc

    • Upgrade to Gulp 4.
    Source code(tar.gz)
    Source code(zip)
  • 2.10.6(Nov 30, 2018)

  • 2.10.5(Oct 11, 2018)

    Bug Fixes

    • ons-list-item: Fix expandable list item not working correctly for lists inside expandable content. (#2485).
    • ons.platform.isIPhoneX: Support iPhone XS, XS Max, and XR. (#2540).

    Misc

    • Updated FontAwesome to 5.2.0 (#2502).
    Source code(tar.gz)
    Source code(zip)
  • 2.10.4(Jul 20, 2018)

    New Features

    • ons.platform: Can choose to ignore selected platform when checking what platform is e.g. ons.platform.isAndroid. (#2475).
    • ons-toolbar: Add methods to show and hide the toolbar (#2478)

    Bug Fixes

    • css: Fix button style for Firefox. (#2469).
    • ons-toast: Fix app closing when toast is shown and back button is pressed (#2388)
    Source code(tar.gz)
    Source code(zip)
  • 2.10.3(Jul 10, 2018)

  • 2.10.2(Jul 3, 2018)

    Bug Fixes

    • ons-lazy-repeat: Fix dynamic adding of items (#2443)
    • ons-toast: Fix padding of Material toast (#2436)
    • ons-button: Remove dotted border on Firefox (#2408)
    • css: Fix CSS import paths (#2336, #2453)
    • ons-input: Prevent zooming of inputs on iOS (#2400)
    • ons-page: Fix page-with-bottom-toolbar not being set in some cases (#2459)
    Source code(tar.gz)
    Source code(zip)
  • 2.10.1(May 28, 2018)

  • 2.10.0(May 17, 2018)

    New Features

    • ons.notification: Add maskColor configuration for alert, confirm and prompt (#2358)
    • ons-list-item: Add expandable list items (#2380)
    • ons-toast: Toast messages can be more than one line long (#2405)

    Bug Fixes

    • onsenui.d.ts: Fixed #2354.
    • ons-toolbar: static attribute works with iOS status bar.
    • ons-pull-hook: Improve scroll behavior in UIWebView. Fixed #2353 and #2357.
    • ons-navigator: Fixed #2376.
    • ons-select: Fixed #2251 for all bindings.
    • ons-splitter-side: Fixed regression of (#2026).
    • ons-popover: Fixed incorrect placement of popover when page is not full width (#2386).
    Source code(tar.gz)
    Source code(zip)
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
Boilerplate to build Cross-Platform Apps with Expo and React Native

Expo and React Native Boilerplate Boilerplate to build Cross-Platform Apps with Expo and React Native What are you going to find in this boilerplate E

José Ferrer 26 Apr 29, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power apps.

Power CAT code components The Power CAT code components are a set of Power Apps component framework (PCF) controls that can be used to enhance power a

Microsoft 70 Jan 2, 2023
Create a performant distributed context state by synergyzing atomar context pieces and composing reusable state logic.

Synergies Create a performant distributed context state by synergyzing atomar context pieces and composing reusable state logic. synergies is a tiny (

Lukas Bach 8 Nov 8, 2022
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop Chat Loop is a highly scalable, low cost and high performant chat application built on AWS and React leveraging GraphQL subscriptions for re

Smile Gupta 24 Jun 20, 2022
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Module SonarCloud Status ag-grid-community ag-grid-enterprise AG Grid AG Grid is a fully-featured and highly customizable JavaScript data grid. It del

AG Grid 9.5k Dec 30, 2022
Vue-hero-icons - A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.

vue-hero-icons For Vue3, install the official package @heroicons/vue A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/her

Mathieu Schimmerling 97 Dec 16, 2022
Vtexio-react-apps - Apps react para plafaforma VTEX.

Projeto Modal + Apps Extras Projeto modal setando cookies. Desenvolvido em React + TypeScript para aplicação em e-commerce VTEXIO. ?? Este projeto se

Marcelo 1 Jan 3, 2022
JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering

Handsontable 17.4k Jan 1, 2023
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Jan 5, 2023
shouganaiyo-loader is a cross-platform Frida-based Node.js command-line tool that forces Java processes to load a Java/JVMTI agent regardless of whether or not the JVM has disabled the agent attach API.

shouganaiyo-loader: Forced Entry for Java Agents shouganaiyo-loader is a cross-platform Frida-based Node.js command-line tool that forces Java process

NCC Group Plc 20 Sep 19, 2022
Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Frontend Mentor - Job listings with filtering Front-end challenge focused on javascript logic, where a list of fictitious vacancies is presented and t

Rui Neto 11 Apr 13, 2022
Migrating from 🅰️ to ⚛️ ? 👉 Use React components in Angular, and vice versa

ngx-react allows you to seamlessy use ⚛️ React and ??️ Angular components together. ?? This package will be the a perfect match to migrate from Angula

Olivier Guimbal 9 Apr 14, 2022
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

Create, Export, Share, and Use any Shapes of your choice. View Demo · Report Bug · Request Feature ?? Introducing TryShape TryShape is an opensource p

TryShape 148 Dec 26, 2022
Annotation-Wizard - a web-based image annotation platform that allows authors to create annotation tasks and annotators to take tasks and annotate images.

Annotation Wizard Annotation Wizard is a web-based image annotation platform. Functionalies User login and register create your own image annotation t

null 2 Aug 12, 2022
React-app - Building volume rendering web app with VTK.js,react & HTML Using datasets provided in vtk examples (head for surface rendering and chest for ray casting)

SBE306 Assignment 4 (VTK) data : Directory containing Head and Ankle datasets Description A 3D medical viewer built with vtk-js Team Team Name : team-

Mustafa Megahed  2 Jul 19, 2022
WPPConnect/mobile is an open source project with the objective of automating whatsapp web using the android or ios mobile browser and being able to perform all the functions of our wa-js project

WPPConnect/mobile is an open source project with the objective of automating whatsapp web using the android or ios mobile browser and being able to perform all the functions of our wa-js project, so it is possible to create a customer service, media sending, intelligence recognition based on artificial phrases and many other things, use your imagination to change and modify this project or collaborate on improvements...

null 11 Dec 28, 2022
:black_medium_small_square:React Move | Beautiful, data-driven animations for React

React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin

Steve Hall 6.5k Jan 1, 2023