Improve this

Additional Features

Grid Layout

Onsen UI provides a grid system to place your elements in the screen. The grid system divides the screen into rows and columns, just like a spreadsheet. The width and height of each grid is adjustable, and you can also condense two or more grids in a row or column, into one grid.

The layout can be made by combining <ons-col> and <ons-row> components. The width and height can be adjusted in a flexible way.

Grid is not necessary in general for list items. A special layout is provided for list items, based on flat iOS and Material Design.

Platform Detection

ons.platform is useful to detect the running platform.

Rotation Detection

ons.orientation is useful to detect the display orientation.

Gesture Detection

It is a common use case to detect a finger gesture and do a specific task. Onsen UI utilizes a modified version of Hammer.js for gesture detection. The Gesture Detector class (Hammer.js) is exposed in ons.GestureDetector object.


var divGD = ons.GestureDetector(document.querySelector('#my-div'));
divGD.on('dragup dragdown', function(event) {
  console.log('drag Y axis');


@ViewChild('somediv') divGD; // <div #somediv>
this.divGD.nativeElement.on('dragup dragdown', function(event) {
  console.log('drag Y axis');

If you’d like to use another library and/or have any conflict, Onsen UI gesture detectors can be easily disabled:


ons.GestureDetector(document.querySelector('#my-menu')).dispose(); // Remove event listeners from the menu


@ViewChild('mymenu') myMenu; // <ons-splitter #mymenu>
ons.GestureDetector(this.myMenu.nativeElement).dispose(); // Remove event listeners from the menu

For non-React users, ons-gesture-detector component can also be used to wrap the target DOM element that should detect the fingers in a handy way.


This section is under construction.