Components

ons-page

Description

Should be used as root component of each page. The content inside page component is scrollable. If you need scroll behavior, you can put inside this component.

Attributes

var Variable name to refer this page.
modifier Modifier name.

ons-navigator

Description

Manages the page navigation backed by page stack.

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 and if options object is specified, apply the options. eg. pushPage('page2.html')
popPage() Pops current page from the page stack
resetToPage(pageUrl,options) Clears page stack and add the specified pageUrl to the page stack. If options object is specified, apply the options. the options object include all the attributes of this navigator
getCurrentPage() Get current page's navigator item. Use this method to access options passed by pushPage() or resetToPage() method. eg. ons.navigator.getCurrentPage().options
getPages() Retrieve the entire page stages of the navigator.
on(eventName,listener) Added 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

Description

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

Attributes

modifier Modifier name.

Sample

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

See also

ons-bottom-toolbar

Description

Use this component to have toolbar position at the bottom of the page.

See also

ons-toolbar-button

Description

Button component for toolbar.

Attributes

modifier Modifier name.

Sample

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

See also

ons-tabbar

Description

Used with tabbar-item to manage pages using tabs.

Attributes

hide-tabs Whether to hide the tabs. Valid values are [true/false] or angular binding. eg:
var Variable name to refer this tabbar.

Methods

on(eventName,listener) Added an event listener. Preset events are 'prechange' and 'postchange'.

Sample

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

See also

ons-tabbar-item

Description

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

Attributes

page The page that this tabbar-item points to
icon The icon of the tab. To use font-awesome icon, just set the icon name without "fa-" prefix. eg. to use "fa-home" icon, set it to "home". 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 of the tab when active. To use font-awesome icon, just set the icon name without "fa-" prefix. eg. to use "fa-home" icon, set it to "home". 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
label The label of the tab
active Set wether this tab should be active or not. Valid values are [true/false]

Sample

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

See also

ons-sliding-menu

Description

Facebook/Path like 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 Wether to enable swipe interaction
swipe-target-width The width of swipable area calculated from the left (in pixel). Eg. Use this to enable swipe only when the finger touch on the left edge.
max-slide-distance How far the above page will slide open. Can specify both in px and %. eg. 90%, 200px
var Variable name to refer this sliding menu.

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) Added an event listener. Preset events are 'preopen', 'preclose', 'postopen' and 'postclose'.
isMenuOpend()

Sample

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

ons-split-view

Description

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

Attributes

secondary-page The url of the page on the left
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
collapse [Deprecated] Specify the collapse behavior. Valid values are [portrait/landscape/width ##px]. "portrait" means the view will collapse when device is in portrait orien0ation. "landscape" means the view will collapse when device is in landscape 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
Deprecated open() Reveal the secondary page if the view is in collapse mode
Deprecated close() hide the secondary page if the view is in collapse mode
Deprecated toggle() 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.

ons-scroller

Description

Makes the content inside this tag scrollable.

ons-list

Description

The container for list-item. Similar to <ul> but styled for mobile.

Attributes

modifier

Sample

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

See also

ons-list-header

Description

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

Attributes

modifier

Sample

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

See also

ons-list-item

Description

Works like <li> but styled for mobile. Must be put inside ons-list tag.

Attributes

modifier

Sample

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

See also

ons-button

Description

Button component. It includes a spinner useful for showing work in progress.

Attributes

type The type of the button. Can be any of [ 'quiet', 'large', 'large--quiet', 'cta', 'large--cta' ]
should-spin Whether the button should switch to show spinner
animation The animation when the button transitions to and from the spinner. Can be any of [ 'expand-left', 'expand-right', 'expand-up', 'expand-down', 'slide-left', 'slide-right', 'slide-up', 'slide-down', 'zoom-out', 'zoom-in' ]. The default is 'slide-left'
disabled Whether the button should be disabled.

Sample

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

ons-back-button

Description

Provides back button for toolbar that can be used for navigation.

Sample

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

See also

ons-switch

Description

Switch component.

Attributes

disabled Wether the switch shoud be disabled.
checked Wether the switch is checked.
var Variable name to refer this switch.
modifier Modifier name.

Methods

isChecked()
setChecked(isChecked)
getCheckboxElement() Get inner input[type=checkbox] element.
on(eventName,listener) Added an event listener. There is 'change' event.

See also

ons-if-orientation

Description

Conditionally display content depending on screen orientation. Valid values are [portrait/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

Description

Conditionally display content depending on the platform/browser. Valid values are [ios/android/blackberry/chrome/safari/firefox/opera]. Different from other components, this component is used as attribute in any element.

Attributes

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

See also

ons-icon

Description

Wrapper for font-awesome icon.

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 css font-size value.
rotate The degree to rotate the icon. Valid values are [90/180/270]
flip Flip the icon. Valid values are [horizontal/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/false]

Sample

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

ons-row

Description

Use <ons-row> and <ons-col> grid system to layout component. By default, all <ons-col> inside a <ons-row> will have the same width. You can specify any <ons-col> to have a specific width and let others take the remaining width in a <ons-row>. You can event vertical align each <ons-col> in a <ons-row>

Attributes

align Short hand attribute for aligning all colum in a row. Valid values are [top/bottom/center].

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

ons-col

Description

Use to layout component.

Attributes

align Vertical align the column. Valid values are [top/center/bottom].
width The width of the column. Valid values are css "width" value. eg. "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