Components

ons-page

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

Example

<ons-page>
  <ons-toolbar>
    <div class="center">Title</div>
  </ons-toolbar>

  ...
</ons-page>

Attributes

var Variable name to refer this page.
modifier Specify modifier name to specify custom styles.
on-device-backbutton Allows you to specify custom behavior when the back button is pressed.
ng-device-backbutton Allows you to specify custom behavior with AngularJS expresion when the back button is pressed.

Methods

getDeviceBackButtonHandler() Get the associated back button handler. This method may return null if no handler is assigned.

See also

ons-navigator

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

Example

<ons-navigator animation="slide" var="app.navi">
  <ons-page>
    <ons-toolbar>
      <div class="center">Title</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button modifier="light" ng-click="app.navi.pushPage('page.html');">Push</ons-button>
    </p>
  </ons-page>
</ons-navigator>

<ons-template id="page.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Title</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button modifier="light" ng-click="app.navi.popPage('page.html');">Pop</ons-button>
    </p>
  </ons-page>
</ons-template>

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.
getDeviceBackButtonHandler() Retrieve the back button handler for overriding the default behavior.
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.

Example

<ons-page>
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center">Title</div>
    <div class="right">Label</div>
  </ons-toolbar>
</ons-page>

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.

Example

<ons-bottom-toolbar>
 <div style="text-align: center; line-height: 44px">Text</div>
</ons-bottom-toolbar>

See also

ons-toolbar-button

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

Example

<ons-toolbar>
  <div class="left"><ons-toolbar-button>Button</ons-toolbar-button></div>
  <div class="center">Title</div>
  <div class="right"><ons-toolbar-button><ons-icon icon="ion-navion" size="28px"></ons-icon></ons-toolbar-button></div>
</ons-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.

Example

<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  ...
</ons-template>

<ons-template id="fav.html">
  ...
</ons-template>

<ons-template id="settings.html">
  ...
</ons-template>

Attributes

hide-tabs Whether to hide the tabs. Valid values are true/false.
var Variable name to refer this tabbar.
animation Animation name. Preset values are none/fade.
position Tabbar's position. Preset values are bottom/top.

Methods

on(eventName,listener) Add an event listener. Possible events are prechange and postchange. See the guide for more details.
setActiveTab(index,[options]) Show specified tab page. Animations and other options can be specified by the second parameter.
getActiveTabIndex() Returns tab index on current active tab. If active tab is not found, returns -1.
loadPage(url) Displays a new page without changing the active index.

Sample

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

See also

ons-tab

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

Example

<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  ...
</ons-template>

<ons-template id="fav.html">
  ...
</ons-template>

<ons-template id="settings.html">
  ...
</ons-template>

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.

Example

<ons-sliding-menu var="app.menu" main-page="page.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="page.html">
  <ons-page>
   <p style="text-align: center">
     <ons-button ng-click="app.menu.toggleMenu()">Toggle</ons-button>
   </p>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-page>
    <!-- menu page's contents -->
  </ons-page>
</ons-template>

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.
getDeviceBackButtonHandler() Retrieve the back-button handler.

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.

Example

<ons-split-view 
  secondary-page="secondary.html" 
  main-page="main.html" 
  main-page-width="70%" 
  collapse="portrait">
</ons-split-view>

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.

Example

<ons-scroller style="height: 200px; width: 100%">
  ...
</ons-scroller>

ons-list

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

Example

<ons-list>
  <ons-list-header>Header Text</ons-list-header>
  <ons-list-item>Item</ons-list-item>
  <ons-list-item>Item</ons-list-item>
</ons-list>

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.

Example

<ons-list>
  <ons-list-header>Header Text</ons-list-header>
  <ons-list-item>Item</ons-list-item>
  <ons-list-item>Item</ons-list-item>
</ons-list>

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.

Example

<ons-list>
  <ons-list-header>Header Text</ons-list-header>
  <ons-list-item>Item</ons-list-item>
  <ons-list-item>Item</ons-list-item>
</ons-list>

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.

Example

<ons-modal>
  ...
</ons-modal>

Attributes

var Variable name to refer this modal.

Methods

toggle() Toggle modal view visibility.
show() Show modal view.
hide() Hide modal view.
getDeviceBackButtonHandler() Retrieve the back-button handler.

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.

Example

<ons-button>Tap Me</ons-button>

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.

Example

<ons-back-button>Back</ons-back-button>

Sample

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

See also

ons-switch

Switch component.

Example

<ons-switch checked></ons-switch>

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-icon

Displays an icon. Font Awesome and Ionicon icons are supported.

Example

<ons-icon icon="fa-twitter" size="20px" fixed-width="false" style="color: red"></ons-icon>

Attributes

icon The icon name. `fa-` prefix for Font Awesome, `ion-` prefix for Ionicons icons. See all icons at http://fontawesome.io/icons/ and http://ionicons.com.
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.

Example

<ons-row>
  <ons-col width="50px"><ons-icon icon="fa-twitter"></ons-icon></ons-col>
  <ons-col>Text</ons-col>
</ons-row>

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.

Example

<ons-row>
  <ons-col width="50px"><ons-icon icon="fa-twitter"></ons-icon></ons-col>
  <ons-col>Text</ons-col>
</ons-row>

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

ons-template

Define a separate HTML fragment and use as a template.

Example

<ons-template id="foobar.html">
  ...
</ons-template>

See also

ons-gesture-detector

Component to detect finger gestures within the wrapped element. See the guide for more details.

Example

<ons-gesture-detector>
  ...
</ons-gesture-detector>

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.

Example

<div if-orientation="portrait">
  ...
</div>

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.

Example

<div if-platform="android">
  ...
</div>

Attributes

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

See also

Fork me on GitHub