Fork me on GitHub

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 an AngularJS expression 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 the current page from the page stack. The previous page will be displayed.
resetToPage(pageUrl,options) Clears page stack and adds 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 stack 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>

Attributes

inline Display the toolbar as an inline element.
modifier The appearance of the toolbar.
fixed-style By default the center element will be left-aligned on Android and center-aligned on iOS. Use this attribute to override this behavior so it's always displayed in the center.

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>

Attributes

inline Display the toolbar as an inline element.

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-tab 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" and "fade". Default is "none".
position Tabbar's position. Preset values are "bottom" and "top". Default is "bottom".

Methods

on(eventName,listener) Add an event listener. Possible events are prechange, postchange and reactive. 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-tab 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-tab 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.
no-reload Set if the page shouldn't be reloaded when clicking on the same tab twice.

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

menu-page The url of the menu page.
main-page The url of the main page.
swipeable Whether to enable swipe interaction.
swipe-target-width The width of swipeable area calculated from the left (in pixels). Use this to enable swipe only when the finger touch on the screen edge.
max-slide-distance How far the menu 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 menu 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.
openMenu([options]) Slide the above layer to reveal the layer behind.
closeMenu([options]) Slide the above layer to hide the layer behind.
toggleMenu([options]) Slide the above layer to reveal the layer behind if it is currently hidden, otherwise, 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.
setSwipeable(swipeable) Specify if the menu should be swipeable or not.

Sample

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

See also

ons-split-view

Divides the screen into a left and right section.

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 width percentage. The secondary page width will be 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 or a media query. "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. If the value is a media query, the view will collapse when the media query is true.
var Variable name to refer to 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
update() Trigger an 'update' event and try to determine if the split behaviour should be changed.
on(eventName,listener) Add an event listener. Preset events are presplit, postsplit, precollapse and postcollapse.

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 define 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 the 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-alert-dialog

Alert dialog that is displayed on top of the current screen.

Example

<script>
  ons.ready(function() {
    ons.createAlertDialog('alert.html').then(function(alertDialog) {
      alertDialog.show();   
    });
  });
</script>

<script type="text/ons-template" id="alert.html">
  <ons-alert-dialog animation="default" cancelable>
    <div class="alert-dialog-title">Warning!</div>
    <div class="alert-dialog-content">
     An error has occurred!
    </div>
    <div class="alert-dialog-footer">
      <button class="alert-dialog-button">OK</button>
    </div>
  </ons-alert-dialog>  
</script>

Attributes

var Variable name to refer this alert dialog.
modifier The appearance of the dialog.
cancelable If this attribute is set the dialog can be closed by tapping the background or by pressing the back button.
disabled If this attribute is set the dialog is disabled.
animation The animation used when showing and hiding the dialog. Can be either "none" or "default".
mask-color Color of the background mask. Default is "rgba(0, 0, 0, 0.2)".

Methods

show(options) Show the alert dialog.
hide(options) Hide the alert dialog.
isShown() Returns whether the dialog is visible or not.
destroy() Destroy the alert dialog and remove it from the DOM tree.
setCancelable(cancelable) Define whether the dialog can be canceled by the user or not.
isCancelable() Returns whether the dialog is cancelable or not.
setDisabled(disabled) Disable or enable the alert dialog.
isDisabled() Returns whether the dialog is disabled or enabled.
on(eventName,listener) Add an event listener. Preset events are preshow, postshow, prehide and posthide.

Sample

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

ons-dialog

Dialog that is displayed on top of current screen.

Example

<script>
  ons.ready(function() {
    ons.createDialog('dialog.html').then(function(dialog) {
      dialog.show();
    });
  });
</script>

<script type="text/ons-template" id="dialog.html">
  <ons-dialog cancelable>
    ...
  </ons-dialog>  
</script>

Attributes

var Variable name to refer this dialog.
modifier The appearance of the dialog.
cancelable If this attribute is set the dialog can be closed by tapping the background or pressing the back button.
disabled If this attribute is set the dialog is disabled.
animation The animation used when showing and hiding the dialog. Can be either "none" or "default".
mask-color Color of the background mask. Default is "rgba(0, 0, 0, 0.2)".

Methods

show(options) Show the dialog.
hide(options) Hide the dialog.
isShown() Returns whether the dialog is visible or not.
destroy() Destroy the dialog and remove it from the DOM tree.
getDeviceBackButtonHandler() Retrieve the back button handler for overriding the default behavior.
setCancelable(cancelable) Set whether the dialog can be canceled by the user or not.
isCancelable() Returns whether the dialog is cancelable or not.
setDisabled(disabled) Disable or enable the dialog.
isDisabled() Returns whether the dialog is disabled or enabled.
getDeviceBackButtonHandler() Retrieve the back button handler for overriding the default behavior.
on(eventName,listener) Add an event listener. Preset events are preshow, postshow, prehide and posthide.

Sample

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

ons-popover

A component that displays a popover next to an element.

Example

<script>
ons.ready(function() {
  ons.createPopover('popover.html').then(function(popover) {
    popover.show('#mybutton');   
  });
});
</script>

<script type="text/ons-template" id="popover.html">
  <ons-popover cancelable>
    <p style="text-align: center; opacity: 0.5;">This popover will choose which side it's displayed on automatically.</p>
  </ons-popover>
</script>

Attributes

var Variable name to refer this popover.
modifier The appearance of the popover.
direction A space separated list of directions. If more than one will be chosen automatically. Valid directions are "up", "down", "left" and "right".
cancelable If this attribute is set the popover can be closed by tapping the background or pressing the back button.
disabled If this attribute is set the popover is disabled.
animation The animation used when showing an hiding the popover. Can be either "none" or "fade".
mask-color Color of the background mask. Default is "rgba(0, 0, 0, 0.2)".

Methods

show(target,options) Open the popover and point it at a target. The target can be either an event, a css selector or a DOM element..
hide() Close the popover.
isShown() Returns whether the popover is visible or not.
destroy() Destroy the popover and remove it from the DOM tree.
setCancelable(cancelable) Set whether the popover can be canceled by the user when it is shown.
isCancelable() Returns whether the popover is cancelable or not.
setDisabled(disabled) Disable or enable the popover.
isDisabled() Returns whether the popover is disabled or enabled.
on(eventName,listener) Add an event listener. Preset events are "preshow", "postshow", "prehide" and "posthide".

Sample

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

ons-modal

Modal component that masks current screen. Underlying components are not subject to 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 visibility.
show() Show modal.
hide() Hide modal.
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.

Methods

startSpin() Show spinner on the button.
stopSpin() Remove spinner from button.
isSpinning() Return whether the spinner is visible or not.
setSpinAnimation(animation) Set spin animation. Possible values are slide-left (default), slide-right, slide-up, slide-down, expand-left, expand-right, expand-up, expand-down, zoom-out, zoom-in.
setDisabled(disabled) Disable or enable the button.
isDisabled() Returns whether the button is disabled or enabled.

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 Number of degrees 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 false.
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 alignment of 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-loading-placeholder

Display a placeholder while the content is loading.

Example

<div ons-loading-placeholder="page.html">
  Loading...
</div>

Attributes

ons-loading-placeholder The url of the page to load.

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-keyboard-active

Conditionally display content depending on if the software keyboard is visible or hidden. This component requires cordova and that the com.ionic.keyboard plugin is installed.

Example

<div ons-keyboard-active>
  This will only be displayed if the software keyboard is open.
</div>
<div ons-keyboard-inactive>
  There is also a component that does the opposite.
</div>

Attributes

ons-keyboard-active The content of tags with this attribute will be visible when the software keyboard is open.
ons-keyboard-inactive The content of tags with this attribute will be visible when the software keyboard is hidden.

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 ons-if-platform="android">
  ...
</div>

Attributes

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

See also