是否可以为定义自定义修改器？(Is possible to define a custom modifier for an ?)

编程入门行业动态更新时间:2024-10-22 18:48:13

我试图为“底部 - 工具栏”定义一个自定义的“修饰符”属性，以便修改它的默认高度值（44px）。

正如在Onsen的网页上定义的那样，“ons-bottom-toolbar”具有该属性，并且如果要为名为“ons-yyyy”的onsen元素创建名为“xxxx”的修饰符，则必须定义一个css类如：

.yyyy--xxxx { /* define style here ... */ }

类名是没有“ons-”sufix，“ - ”和修饰符名称的onsen元素。

我可以这样做一个“ons-button”：

<ons-button modifier="green">GREEN BUTTON</ons-button> .button--green { background-color: green; }

...但是对于“ons-bottom-toolbar”不起作用：

<ons-bottom-toolbar modifier="pink"> PINK FOOTER???? </ons-bottom-toolbar> .bottom-toolbar--pink{ height: 24px; background-color: pink; border-top: 5px solid black; }

你可以看看http://codepen.io/anon/pen/MaxNNb

任何想法？

I'm trying to define a custom "modifier" attribute for an "ons-bottom-toolbar" in order to modify it's default height value (44px).

As is defined on Onsen's web page, the "ons-bottom-toolbar" has that attribute, and if you want to create an modifier named "xxxx" for an onsen element named "ons-yyyy", you have to define an css class as:

.yyyy--xxxx { /* define style here ... */ }

where the class name is the onsen element without "ons-" sufix, "--" and the modifier name.

I can do this for an "ons-button":

<ons-button modifier="green">GREEN BUTTON</ons-button> .button--green { background-color: green; }

... but for an "ons-bottom-toolbar" don't work:

<ons-bottom-toolbar modifier="pink"> PINK FOOTER???? </ons-bottom-toolbar> .bottom-toolbar--pink{ height: 24px; background-color: pink; border-top: 5px solid black; }

You can take a look here http://codepen.io/anon/pen/MaxNNb

¿Any idea?