ons-toolbar-button

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

Tutorial

The <ons-page> element

The root of a page in Onsen UI is created using the <ons-page> element. It covers the whole screen and is used as a container for the other elements. When managing multiple views, all of them must be contained in <ons-page> element.

<ons-page>
  Content goes here
</ons-page>

This element automatically spawns a background and a content elements. These can also be manually provided for higher customizability:

<ons-page>
  Toolbar here

  <div class="background"></div>

  <div class="content">
    Scrollable content here
  </div>

  Fixed content here
</ons-page>

Since content element is transparent by default, we can add custom colors to the background element. Notice that, if content element is provided, scrollable and fixed content must be manually separated as well.

Lifecycle

The page element throws init, show, hide and destroy events depending on its lifecycle. The most important one is perhaps init event, where all the page initialization code should be placed:

document.addEventListener('init', function(event) {
  var page = event.target;
  if (page.matches('#myPageID') {
    // Set up page's dynamic content or behavior
    page.querySelector('ons-toolbar .center').innerHTML = 'Title';
    page.querySelector('ons-button').onclick = function() {};
    // ...
  }
});

Alternatively, lifecycle hooks are also provided for those who prefer a more compact approach. onInit, onShow, onHide and onDestroy are run at the same time as their corresponding events. Hooks must be added in a script tag directly inside the page:

<ons-page>
  Content here

  <script>
    ons.getScriptPage().onInit = function() {
      // Hooks are bound to the page element

      this.querySelector('ons-toolbar .center').innerHTML = 'Title';
      this.onShow = function() {};
    };
  </script>
</ons-page>

ons.getScriptPage() returns the page element of the current script tag. It cannot be used in any other context.

See also

Attributes

Name Type Default Value Description
modifier String The appearance of the button. Optional.
icon String Creates an ons-icon component with this string. Optional.
disabled Specify if button should be disabled. Optional.

Properties

Name Description
disabled Whether the element is disabled or not.

Preset Modifiers

Name Description
material Material Design toolbar button.
outline A button with an outline.

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.