Custom modifier in onsen UI

Question

I am using Onsen UI in my Cordova project, how is it possible to make custom modifier like chevron, tappable etc? In documentation it is nothing about this http://onsen.io/guide/overview.html#UsingModifier

I want to make theme switcher and load another css files when e.g. modifier="orange" or modifier="blue". Thx.

score 3 · Accepted Answer · answered Sep 25 '15 at 02:21

Defining custom modifiers is quite easy. A modifier will add a suffix to the base CSS class, i.e. for <ons-button> the base class is .button, so if you write

<ons-button modifier="orange">Orange button</ons-button>

the class .button--orange will be added. You can style the modified button by using the following CSS:

.button--orange {
  background-color: #ffb836;
}

See how it's done in this simple example: http://codepen.io/argelius/pen/bVwzJL

Custom modifier in onsen UI

1 Answers1