Menu hamburger icon

Onsen UI News & Roadmap

Onsen UI Roadmap

After a long time working on making Onsen UI framework agnostic and releasing bindings for Vue 2, React and Angular, we plan to give some love to the core library in the shape of new components and features. Discover here the next Onsen UI roadmap.

In case you didn’t notice yet, Onsen UI 2.1.0 was released a few days ago. It comes with several bug fixes, support for Vue 2.x and a new ons-select component. Read the whole changelog here.

Apart from changes in the core library, we also want to keep improving the docs. For this purpose, we’ll be adding more sections to our website that hopefully will make Onsen UI even easier to use.

Here are some of the new goals for the upcoming releases:

Less components

We decided to make some clean up in our CSS Components and took the chance to also drop Stylus in favor of Less. There is nothing wrong with Stylus itself but looks like not many users are familiar with it. Therefore, we decided to use something more common in order to make custom style modifications faster.

This comes with the deprecation of the Theme Roller as we know it today since it is based on Stylus components. Nevertheless, we are making a new “CSS Showcase” and some quick Theme Roller functionality that can be run in local environments. We believe this approach fits better the normal app development process.

More components

Most of the “complex” components (menus, tabs, navigation…) are already implemented in Onsen UI. However, we gave priority to the support of JS frameworks over implementing simple CSS components such as select or toast. Now that we support most of the main JS frameworks, it’s time to focus a bit on creating these CSS components. They will come with Custom Elements as well in order to provide ease of use and autostyling feature. Some examples:

  • ons-select: The Select element is already implemented and released in 2.1.0. However, support for AngularJS, Angular2 and React will come in the next version (ready but pending release). For the Select element, we got a pull request with a CSS component that we turned into a Custom Element. PRs like this are very welcome (thanks, @FREEZX!).
  • iOS Action Sheets.
  • Material Snackbars.
  • Toast messages.

Same components, new features

Apart from new components, we also want to address existing ones and update them a bit. Some examples are:

  • Lazy Repeat with dynamic heights: So far it was necessary to specify the height of every element in a lazy list. After this change, Lazy Repeat itself will detect the height of the elements instead. Expected to be released in 2.2.0 (soonish).
  • Swipeable Tabbar: We have sliding animation and some examples with an ons-carousel + ons-tabbar combo to make it swipeable. However, we want to add real support for this feature soon.
  • Swipeable Navigator: Swipe to pop functionality.

Feedback and feature requests

Any important feature or component we are missing? Open an issue on Github and tell us about it. In case you are willing to implement all or part of it, let’s talk about the best approach first. Otherwise, leave the idea and we’ll add it to the backlog.

Happy coding!