Vue 2 Reference > v-ons-toolbar-button

v-ons-toolbar-button

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

Tutorial

The “VOnsPage” component

The VOnsPage component serves as the main view of a screen in an app. It covers the whole screen and is used as a container for the other components. When managing multiple views, all of them must be contained in VOnsPage components.

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

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

<v-ons-page>
  Toolbar here

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

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

  Fixed content here
</v-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.

See also

Props

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

Preset Modifiers

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

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord 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.