Angular Js 2 built-in components - ngStyle built-in component
import { Component } from 'angular2/core';import { bootstrap } from 'angular2/platform/browser';
@Component({
selector: 'style-sample-app',
template: `
<h4 class="ui horizontal divider header">
style.background-color
</h4>
<div [style.background-color]="'yellow'">
Uses fixed yellow background
</div>
<h4 class="ui horizontal divider header">
ngStyle literal
</h4>
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
Uses fixed white text on blue background
</div>
<h4 class="ui horizontal divider header">
ngStyle literal and style.font-size.px
</h4>
<div>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
red text
</span>
</div>
<h4 class="ui horizontal divider header">
ngStyle with an object
</h4>
<div [ngStyle]="style"></div>
<h4 class="ui horizontal divider header">
ngStyle with object property from variable
</h4>
<div>
<span [ngStyle]="{color: colorinput.value}">
{{ colorinput.value }} text
</span>
</div>
<h4 class="ui horizontal divider header">
style from variable
</h4>
<div [style.background-color]="colorinput.value"
style="color: white;">
{{ colorinput.value }} background
</div>
<h4 class="ui horizontal divider header">
Play with the color and font-size here
</h4>
<div class="ui input">
<input type="text" name="color" value="{{color}}" #colorinput>
</div>
<div class="ui input">
<input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
</div>
<button class="ui primary button" (click)="apply(colorinput.value, fontinput.value)">
Apply settings
</button>
`
})
class StyleSampleApp {
color: string;
fontSize: number;
style: {
'background-color': string,
'border-radius': string,
border?: string,
width?: string,
height?: string
};
constructor() {
this.fontSize = 16;
this.color = "blue";
this.style = {
'background-color': '#ccc',
'border-radius': '50px',
'height': '30px',
'width': '30px',
};
}//constructor ends here.
apply(color, fontSize) {
this.color = color;
this.fontSize = fontSize;
}
}//class StyleSampleApp ends here.
bootstrap(StyleSampleApp);
/*********************************************************************/
The css file styles.css has the following code.
body {
font-family: verdana, arial, helvetica, sans-serif;
}
div {
padding: 3px;
margin: 2px;
}
.ui.menu .item img.logo {
margin-right: 1.5em;
}
/*********************************************************************/
The index.html has the following code.
<!doctype html>
<html>
<head>
<title>Angular 2 - ngStyle demo</title>
<link rel="icon" type="image/png" href="resources/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="resources/images/favicon.ico" />
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Configure System.js, our module loader -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<!-- Menu Bar -->
<div class="ui menu">
<div class="ui container">
<a href="#" class="header item">
<img class="logo" src="resources/images/ng-book-2-minibook.png">
ng-book 2
</a>
<div class="header item borderless">
<h1 class="ui header">
Angular 2 ngStyle demo
</h1>
</div>
</div>
</div>
<div class="ui main text container">
<style-sample-app></style-sample-app> <!-- Our app loads here -->
</div>
</body>
</html>
/*********************************************************************/
No comments:
Post a Comment