Example
Binding to the browser native style attribute using Aurelia. If using string interpolation, you should use the css alias so styling works in Internet Explorer.
Style String
export class MyViewModel {
constructor() {
this.styleString = 'color: #F2D3D6; background-color: #333';
}
}
<template>
<div style.bind="styleString"></div>
</template>
Style Object
export class MyViewModel {
constructor() {
this.styles = {color: '#F2D3D6', 'background-color': '#333'};
}
}
<template>
<div style.bind="styles"></div>
</template>
String Interpolation
Very similar to string binding above, this allows you to use string interpolation to bind to styles instead. If any of the values change, they will be updated in the view accordingly.
Note: for Internet Explorer compatibility, we use the alias css to bind styles. This ensures that string interpolation works in Internet Explorer.
export class MyViewModel {
color = 'red';
height = 350;
width = 350;
}
<template>
<div css="width: ${width}px; height: ${height}px; color:${color}">My Text</div>
</template>
