Components

ons-page

Should be used as root component of each page. The content inside page component is scrollable.

Attributes

var Variable name to refer this page.
modifier Specify modifier name to specify custom styles.

See also

ons-navigator

A component that provides page stack management and navigation. This component does not have a visible content.

Attributes

page First page to show when navigator is initialized.
var Variable name to refer this navigator.

Methods

pushPage(pageUrl,options) Pushes the specified pageUrl into the page stack.
insertPage(index,pageUrl,options) Insert the specified pageUrl into the page stack with specified index.
popPage() Pops current page from the page stack. One previous page will be displayed.
resetToPage(pageUrl,options) Clears page stack and add the specified pageUrl to the page stack.
getCurrentPage() Get current page's navigator item. Use this method to access options passed by pushPage() or resetToPage() method.
getPages() Retrieve the entire page stacks of the navigator.
on(eventName,listener) Add an event listener. Preset events are prepop, prepush, postpop and postpush.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-toolbar

Toolbar component that can be used with navigation. Left, center and right container can be specified by class names.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-bottom-toolbar

Toolbar component that is positioned at the bottom of the page. Has same functionality as the ons-toolbar component.

See also

ons-toolbar-button

Button component for ons-toolbar and ons-bottom-toolbar.

Attributes

modifier Specify modifier name to specify custom styles.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-tabbar

A component to display a tab bar on the bottom of a page. Used with ons-tabbar-item to manage pages using tabs.

Attributes

hide-tabs Whether to hide the tabs. Valid values are true/false.
var Variable name to refer this tabbar.

Methods

on(eventName,listener) Add an event listener. Possible events are prechange and postchange.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-tabbar-item

Represents a tab inside tabbar. Each ons-tabbar-item represents a page.

Attributes

page The page that this ons-tabbar-item points to.
icon The icon name of the tab. Can specify the same icon name as ons-icon. If you need to use your own icon, create a css class with background-image or any css properties and specify the name of your css class here.
active-icon The icon name of the tab when active.
label The label of the tab item.
active Set whether this item should be active or not. Valid values are true and false.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-sliding-menu

Component for sliding UI where one page is overlayed over another page. The above page can be slided aside to reveal the page behind.

Attributes

behind-page The url of the page to be set to the behind layer.
above-page The url of the page to be set to the above layer.
swipable Whether to enable swipe interaction.
swipe-target-width The width of swipable area calculated from the left (in pixel). Use this to enable swipe only when the finger touch on the screen edge.
max-slide-distance How far the behind page will slide open. Can specify both in px and %. eg. 90%, 200px
var Variable name to refer this sliding menu.
side Specify which side of the screen the behind page is located on. Possible values are left and right.

Methods

setMainPage(pageUrl,[options]) Show the page specified in pageUrl in the main contents pane.
setMenuPage(pageUrl,[options]) Show the page specified in pageUrl in the side menu pane.
setAbovePage(pageUrl) [Deprecated]Show the page specified in pageUrl in the above layer.
setBehindPage(pageUrl) [Deprecated]Show the page specified in pageUrl in the behind layer.
openMenu() Slide the above layer to reveal the layer behind.
closeMenu() Slide the above layer to hide the layer behind.
toggleMenu() Slide the above layer to reveal the layer behind if it is currently hidden, otherwies, hide the layer behind.
on(eventName,listener) Add an event listener. Preset events are preopen, preclose, postopen and postclose.
isMenuOpened() Returns true if the menu page is open, otherwise false.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-split-view

Divides the screen into left and right section. This component can also act as sliding menu which can be controlled by collapse attribute.

Attributes

main-page The url of the page on the right.
main-page-width Main page's width percentage. The width of secondary page take the remaining percentage.
secondary-page The url of the page on the left.
collapse Specify the collapse behavior. Valid values are portrait, landscape, width ##px. "portrait" or "landscape" means the view will collapse when device is in landscape or portrait orientation. "width ##px" means the view will collapse when the window width is smaller than the specified ##px.
var Variable name to refer this split view.

Methods

setMainPage(pageUrl) Show the page specified in pageUrl in the right section
setSecondaryPage(pageUrl) Show the page specified in pageUrl in the left section
open() [Deprecated] Reveal the secondary page if the view is in collapse mode
close() [Deprecated] hide the secondary page if the view is in collapse mode
toggle() [Deprecated] Reveal the secondary page if it is currently hidden, otherwies, reveal it

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-scroller

Makes the content inside this tag scrollable.

ons-list

Component to defines a list, and the container for ons-list-item(s).

Attributes

modifier

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-list-header

Header element for list items. Must be put inside ons-list component.

Attributes

modifier

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-list-item

Component that represents each item in the list. Must be put inside ons-list component.

Attributes

modifier

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-modal

Modal component that mask current screen. Underlying components are not noticed from any events while the modal component is shown.

Attributes

var Variable name to refer this modal.

Methods

toggle() Toggle modal view visibility.
show() Show modal view.
hide() Hide modal view.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-button

Button component. If you want to place a button in a toolbar, use ons-toolbar-button or ons-back-button instead.

Attributes

modifier The appearance of the button. Predefined modifiers are quiet, light, large, large--quiet, cta, and large--cta.
should-spin Specify if the button should have a spinner.
animation The animation when the button transitions to and from the spinner. Possible values are slide-left (default), slide-right, slide-up, slide-down, expand-left, expand-right, expand-up, expand-down, zoom-out, zoom-in.
disabled Specify if button should be disabled.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-back-button

Back button component for ons-toolbar. Can be used with ons-navigator to provide back button support.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-switch

Switch component.

Attributes

disabled Whether the switch should be disabled.
checked Whether the switch is checked.
var Variable name to refer this switch.
modifier Modifier name to apply custom styles.

Methods

isChecked() Returns true if the switch is ON.
setChecked(isChecked) Set the value of the switch. isChecked can be either true or false.
getCheckboxElement() Get inner input[type=checkbox] element.
on(eventName,listener) Add an event listener. Possible event name is change.

See also

ons-if-orientation

Conditionally display content depending on screen orientation. Valid values are portrait and landscape. Different from other components, this component is used as attribute in any element.

Attributes

ons-if-orientation Either portrait or landscape.

See also

ons-if-platform

Conditionally display content depending on the platform / browser. Valid values are ios, android, blackberry, chrome, safari, firefox, and opera.

Attributes

ons-if-platform Either opera, firefox, safari, chrome, ie, android, blackberry, ios or windows.

See also

ons-icon

Displays an icon. Can be specified from Font Awesome lineups.

Attributes

icon The icon name. set the icon name without `fa-` prefix. eg. to use fa-home icon, set it to "home". See all icons: http://fontawesome.io/icons/.
size The sizes of the icon. Valid values are lg, 2x, 3x, 4x, 5x, or in pixels.
rotate The degree to rotate the icon. Valid values are 90, 180, or 270.
flip Flip the icon. Valid values are horizontal and vertical.
fixed-width When used in the list, you want the icons to have the same width so that they align vertically by setting the value to true. Valid values are true, false. Default is true.
spin Whether to spin the icon. Valid values are true and false.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-row

Represents a row in the grid system. Use with ons-col to layout components.

Attributes

align Short hand attribute for aligning vertically. Valid values are top, bottom, and center.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

ons-col

Represents a column in the grid system. Use with ons-row to layout components.

Attributes

align Vertical align the column. Valid values are top, center, and bottom.
width The width of the column. Valid values are css width values ("10%", "50px").

Note: For Android 4.3 and earlier, and iOS6 and earlier, when using mixed alignment with ons-row and ons-column, they may not be displayed correctly. You can use only one align.

Sample

See the Pen ons-screen.presentPage, dismissPage by Onsen & Monaca (@onsen) on CodePen.

See also

Fork me on GitHub