ONSEN UI 2: BEAUTIFUL HTML5 HYBRID MOBILE APP FRAMEWORKCOMMUNITY FORUMREACT APIPLAYGROUNDJQUERYANGULARJS 1 APIFUNDAMENTALS Make beautiful hybrid mobile apps using HTML5, CSS and JavaScript. Works with or without any framework including Angular, Meteor, React and Vue. iOS and Android.

CSS COMPONENTS

List of interactive, easily customizable CSS components for Onsen UI.

iOS and Android.

ONS.NOTIFICATION

Dialogs can be displayed with the ons.notification shortcut methods: These methods all return a Promise. For the confirm it resolves to the index of the button pressed and for the prompt it resolves to the user input. The , and tags can also be ONSEN UI FRAMEWORK FOR HYBRID MOBILE APPS AND PWA Starting with Onsen UI is easy. Imagine what you can build with it

from these samples.

PAGE PATTERNS

Make beautiful hybrid mobile apps using HTML5, CSS and JavaScript. Works with React, AngularJS 1 & 2 and Web Components. Both Material Design and Flat Design.

ONS-ROW - ONSEN UI

Beautiful and performant mobile HTML5 components for PWA and hybrid. Works with React, Angular, Vue and Web Components. Both Material Design and Flat Design.

ONS-SPEED-DIAL

Speed dial. The Speed dial is a Material Design component similar to the Floating action button. It is used to display a element that when clicked displays a menu. The component is defined using the element and the items with .

ONS-NAVIGATOR

The Navigator. The element handles a stack of pages. This is a very common type of navigation in mobile apps where one page is pushed on top of another using a transition animation. To change the animation you can use the animation attribute: . Available animations are:

ONS-TOOLBAR

Most mobile apps have a toolbar at the top containing a header text and maybe some buttons. In Onsen UI this is achieved using the element. It is divided into three sections that are defined using the HTML classes left, center and right. Buttons can be added to the toolbar with the element. ONS-SELECT - ONSEN UI The element is used to display a select box with an arbitrary number of options. It will display a native select on mobile devices. There are several attributes that can be used to customize the behavior of the element. These are the same attributes as those that can be used for the regular HTML element, including multiple. ONSEN UI 2: BEAUTIFUL HTML5 HYBRID MOBILE APP FRAMEWORKCOMMUNITY FORUMREACT APIPLAYGROUNDJQUERYANGULARJS 1 APIFUNDAMENTALS Make beautiful hybrid mobile apps using HTML5, CSS and JavaScript. Works with or without any framework including Angular, Meteor, React and Vue. iOS and Android.

CSS COMPONENTS

List of interactive, easily customizable CSS components for Onsen UI.

iOS and Android.

ONS.NOTIFICATION

Dialogs can be displayed with the ons.notification shortcut methods: These methods all return a Promise. For the confirm it resolves to the index of the button pressed and for the prompt it resolves to the user input. The , and tags can also be ONSEN UI FRAMEWORK FOR HYBRID MOBILE APPS AND PWA Starting with Onsen UI is easy. Imagine what you can build with it

from these samples.

PAGE PATTERNS

Make beautiful hybrid mobile apps using HTML5, CSS and JavaScript. Works with React, AngularJS 1 & 2 and Web Components. Both Material Design and Flat Design.

ONS-ROW - ONSEN UI

Beautiful and performant mobile HTML5 components for PWA and hybrid. Works with React, Angular, Vue and Web Components. Both Material Design and Flat Design.

ONS-SPEED-DIAL

Speed dial. The Speed dial is a Material Design component similar to the Floating action button. It is used to display a element that when clicked displays a menu. The component is defined using the element and the items with .

ONS-NAVIGATOR

The Navigator. The element handles a stack of pages. This is a very common type of navigation in mobile apps where one page is pushed on top of another using a transition animation. To change the animation you can use the animation attribute: . Available animations are:

ONS-TOOLBAR

Most mobile apps have a toolbar at the top containing a header text and maybe some buttons. In Onsen UI this is achieved using the element. It is divided into three sections that are defined using the HTML classes left, center and right. Buttons can be added to the toolbar with the element. ONS-SELECT - ONSEN UI The element is used to display a select box with an arbitrary number of options. It will display a native select on mobile devices. There are several attributes that can be used to customize the behavior of the element. These are the same attributes as those that can be used for the regular HTML element, including multiple.

TUTORIAL - ONSEN UI

Overview. This tutorial will show you how to build an app from scratch using Onsen UI. We will cover solutions to common tasks in app development, including: Navigating tabs and pages. Authenticating user login. Paging data from a remote API. Displaying large lists

PAGE PATTERNS

Make beautiful hybrid mobile apps using HTML5, CSS and JavaScript. Works with React, AngularJS 1 & 2 and Web Components. Both Material Design and Flat Design. ONS-RANGE - ONSEN UI Range sliders. The element is used to display a slider.. There are several attributes that can be used to customize the behavior of the element. Most of these are the same attributes as those that can be used for elements.. To set the maximum and minimum and maximum value the min and max attributes are used. The step attribute can be used to

change how much the

ONS-NAVIGATOR

The Navigator. The element handles a stack of pages. This is a very common type of navigation in mobile apps where one page is pushed on top of another using a transition animation. To change the animation you can use the animation attribute: . Available animations are: ONS-SELECT - ONSEN UI The element is used to display a select box with an arbitrary number of options. It will display a native select on mobile devices. There are several attributes that can be used to customize the behavior of the element. These are the same attributes as those that can be used for the regular HTML element, including multiple. ONS-BUTTON - ONSEN UI Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example: . Button that doesn’t stand out. Button with no outline and or background.. Button that really stands out. Large button that covers the width of the screen. INPUT REACT COMPONENT An input element. The type attribute can be used to change the input type. All text input types as well as checkbox and radio are supported. The component will automatically render as a Material Design input on Android devices. Most attributes that can be used for a normal element can also be used on the element..

ONS-ICON - ONSEN UI

Ionicons are good for iOS apps while the Material Icons work best for apps using Material Design. Since Onsen UI renders differently based on the platform there is a special syntax to also select the icons based on platform: . This code will automatically render as a md-menu

icon on

ONS-TOOLBAR-BUTTON

The root of a page in Onsen UI is created using the element. It covers the whole screen and is used as a container for the other elements. When managing multiple views, all of them must be contained in element. Content goes here . This element automatically spawns a background and a content elements.

ONS-PULL-HOOK

ons-pull-hook Component that adds Pull to refresh functionality to an element. It can be used to perform a task when the user pulls down at the top of the page. A common usage is to refresh the data displayed

in a page.

*

* Guide

* Onsen UI Overview

* Using with Frameworks

* jQuery

* AngularJS 1.x

* Angular 2+

* React

* Vue.js

* Onsen UI 1.x

* API

* CSS Components

* JavaScript (Web Components)

* AngularJS 1.x

* Angular 2+

* React

* Vue.js

* Onsen UI 1.x

* Components

* Resources

* Theme Roller

* Samples

* Playground

* Community

* Blog

* Awesome Onsen UI

* NEWS

0" class="recent-activities-menu-item-notification"> {{countUnreadItems()}}

RECENT ACTIVITIES

{{fromNow(item.date)}}

NEW

* NEWS

0

RECENT ACTIVITIES

2 years ago

Onsen UI 2.10 Released

NEW

Onsen UI 2.10 has been released, adding support for much-requested EXPANDABLE LIST ITEMS (also known as accordions). This blog post explains in detail how to use expandable list items

with Onsen UI 2.10:

Expandable list items in Onsen UI 2.10 Expandable list items are much like regular items in an Onsen UI list, except that they can be expanded to reveal hidden content. They're really easy ...

Medium

2 years ago

New Theme Roller and Dark Theme!

NEW

A new DARK THEME for Onsen UI and an updated version of the online THEME ROLLER were released! Check out the COMPONENTS SECTION to see it in action or read the next article for more information: Onsen UI Dark & Theme Customization The new Onsen UI Theme Roller app is alive! Make your own theme or just tweak the existing ones easily with this new online tool...

Medium

2 years ago

Onsen UI 2.8 Released

NEW

The new Onsen UI 2.8 comes with some interesting changes: bundle size reduced, self-contained components and more! All the changes explained in this article: New in Onsen UI 2.8: App size is much smaller than before! The new version of Onsen UI (2.8.x) was released some days ago with some interesting changes: Bundle Size 50% Down! Since v2.2.0 we have been refactoring all...

Medium

2 years ago

Onsen UI 2.7 Released

NEW

iPhone X is now fully supported! This release includes a patch for

iPhone X.

This blog post explains how to enable the patch and more: Supporting iPhone X for mobile web & Cordova app using Onsen UI iPhone X is the latest model of Apple’s iPhone series unveiled in September 2017. This unique & eloquent handset will be sold worldwide from November 3rd. At the first glance you will notice...

Medium

2 years ago

We are on Medium! NEW We launched The Web Tub , a new publication on Medium. This is our first article about Onsen UI. Improve UX with Swiping Tab Bar Using Onsen UI for Vue A swiping tab bar splits the content into different pages and allows the user bringing the desired page into view with his/her own finger. Improve the UX of your Vue apps with this component.

Medium

2 years ago

Onsen UI 2.6.1

Released

NEW

A bunch of bug fixes are included in this release. Better support for iOS 8 and Android 4.4.4.

2 years ago

Onsen UI 2.6.0

Released

NEW

Onsen UI 2.6.0 is here! It comes with an amazing swiping tabbar and a new segment component. Bindings for Vue (2.2.0) and React (1.6.0) are

also released.

Updated Vue Kitchensink App

with the latest

features. Looks awesome, check it out! Updated playground tutorials for tabbar and segment.

2 years ago

Playground

Updated NEW

Updated the ngx-onsenui examples

.

If you are using angular2-onsenui, we recommend updating it to

ngx-onsenui .

2 years ago

Website Updated NEW

Added "Recent Activities" at the upper right corner. The most beautiful and efficient way to develop HTML5 hybrid and

mobile web apps.

Get started

Download

2.10.10 Demo

Libraries for framework users

AngularJS 1

Angular 2+

React

Vue

Try it on your phone at onsen.io/demo THE FASTEST WAY TO DEVELOP BEAUTIFUL HTML5 HYBRID AND MOBILE WEB APPS Experience streamlined development with zero-time setup, using the technologies you already know and love - Javascript, HTML and CSS. NATIVE LOOK AND FEEL WITH LOTS OF READY-TO-USE COMPONENTS AND

AUTOMATIC STYLING

A rich variety of UI components specially designed for mobile apps. Onsen UI provides tabs, side menu, stack navigation and tons of other components such as lists and forms. They all have iOS and Android Material design support, with automatic styling that will change the appearance of the app based on the platform. With Onsen UI you can truly support both Android and iOS with the same source code. PERFORMANCE OPTIMIZED FOR MOBILE Worried that PhoneGap / Cordova apps are slow? Fear not! All animations in Onsen UI have been tuned and optimized to perform well on a wide range of devices. We take great care to ensure that apps made using Onsen UI feel smooth even on lower end devices.

EASY TO LEARN

Onsen UI is easy to learn while being a powerful tool to create complex mobile apps. We have lots of learning resources including official documentation, an interactive tutorial and a community forum where your questions get answered.

ONSEN UI X MONACA

Onsen UI works great with Monaca . Monaca offers a powerful command-line tool and desktop app to simplify complicated tasks. You can also use the Monaca Debugger to test your apps on device, including live-reload to help speed up your development. And when you're ready to release, Monaca builds your Onsen UI app in the cloud, ready to upload to the app stores. WORK YOUR MAGIC WITH ONSEN UI Get inspired by wonderful apps created with Onsen UI that have already been published in Google Play and App store. Onsen UI apps have shipped on over 100 million mobile devices. See our

sample apps here.

GIRO D'ITALIA

Official app for the famous bicycle race

Open

Article

OHALOG

Japanese sleep tracking app

Open

Article

OFFCOURSE GOLF

Keep track of your golf score

Open

Article

Tools for developing sharp, useful mobile apps are a key part of any developer toolkit. A framework-agnostic full-stack tool like Onsen UI can go a long way in helping developers build mobile apps that matter. Onsen UI 2.0 is really cool! Onsen UI 2.0’s focus on mobile UX is great for developers attempting to reach a broad audience. Tools for developing sharp, useful mobile apps are a key part of any developer toolkit. A framework-agnostic full-stack tool like Onsen UI can go a long way in helping developers build mobile apps that matter.

Brian LeRoux

The mastermind behind PhoneGap, Cofounder at Small Wins

Stephen Fluin

Developer Advocate at Google Home Onsen UI Onsen UI for Angular Onsen UI for React Onsen UI for Vue Guide Installation Getting Started

Fundamentals

Troubleshooting and FAQ API CSS Component JavaScript (Web Components) AngularJS 1.x Angular 2+ React Vue.js Onsen UI

1.x

Resources Samples Playground Community

Blog

Stay tuned for more! Receive the latest and greatest hybrid app development news. Monaca X Onsen UI Team will send you all the relevant updates once or twice per

month.

Thanks for subscribing! Copyright © 2013-2019 Monaca x Onsen UI Team . All rights reserved. Privacy Policy

__

STAY UP TO DATE!

Get updates on Onsen UI, Monaca and hybrid app development. No more than 2-3 times a month. Thanks for subscribing!