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.
ons.platform is useful to detect the running platform.
ons.orientation is useful to detect the display orientation.
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.
Non-Angular:
var divGD = ons.GestureDetector(document.querySelector('#my-div'));
divGD.on('dragup dragdown', function(event) {
console.log('drag Y axis');
});
Angular:
@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:
Non-Angular:
ons.GestureDetector(document.querySelector('#my-menu')).dispose(); // Remove event listeners from the menu
Angular:
@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.
A common problem with hybrid mobile apps is the 300ms tap delay which some browsers insert. Most modern browsers no longer do this, but it is still a problem for older platforms, including Cordova apps on iOS. To overcome this tap delay, Onsen UI comes bundled with FastClick, a polyfill library which uses touch events to remove this delay. Though the library is no longer maintained by its original maintainers, Onsen UI maintains its own fork to ensure that we can handle any major fixes needed.
Once the page is loaded, the FastClick instance can be accessed directly by using ons.fastClick. On platforms that no longer need FastClick, it will not be used. If you do not want to use it at all, you can run this in ons.ready:
ons.fastClick.destroy();