with-style-mixin
An Ember mixin to allow you to bind style properties on your view/controller/whatever properties. Very simple live demo available here
Installation
npm install --save-dev with-style-mixin
Using
To use in your app with any view, import and use the mixin:
;; View;
You'll then get that in the generated HTML:
...well, ok it doesn't make sense as a style but it is to show the different features.
You can also use the {{bind-style ...}}
helper if you need to bind styles on any other element than
the main element of a view. It's working exactly the same thinking that you give as arguments each entry
you'd put in the view's styleBindings
property:
<div {{bind-style 'width[px]' 'color' 'fontSize:font-size[em]' 'margin[px]' 'show:display?block:none' 'visible:visibility?:hidden'}}> <p>hello!<p></div>
You can also combine all in one string, separating each of them with a space:
<div {{bind-style 'width[px] color fontSize:font-size[em] margin[px]' 'show:display?block:none visible:visibility?:hidden'}}> <p>hello!<p></div>
API
- All style properties have to be defined on
styleBindings
as an array - Each property can be:
- The name of the css property:
width
(thewidth
Ember property will then be used as source forwidth
css property)
- The name of your Ember property +
:
+ the name of the css property:myWidth:width
(themyWidth
Ember property will then be used as source forwidth
css property)
- One of the 2 above + a unit between
[
and]
:width[px]
(thewidth
Ember property will then be used as source forwidth
css property, appendpx
at the end of the value)myWidth:width[px]
(themyWidth
Ember property will then be used as source forwidth
css property, appendpx
at the end of the value)
- One of the 3 above (well 4 exactly) +
?
+ the value to use if truthy +:
+ the value to use if falsy:display?block:none
(block
will be used ifdisplay
is truthy, elsenone
)isVisible:display?:none
(nothing used ifisVisible
is truthy,none
is used ifisVisible
is falsy)isLarge:line-height[px]?30:20
(line-height
will be30px
ifisLarge
is truthy, else20px
)
- The name of the css property:
- If the property value is
undefined
,null
or''
(empty string), it'll not be included in thestyle
- When a unit is specified, it'll be appended to the value unless the value is
0
or not numeric, which allow you to do:width[px]
:width
is0
:width: 0;
width
is10
or'10'
:width: 10px;
(works also with float values)width
is'10%'
:width: 10%;