Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 6f945b7

Browse files
teropawardbell
teropa
authored and
wardbell
committed
docs(component-styles): add chapter about styling components
closes #1047
1 parent 0fdceec commit 6f945b7

24 files changed

+673
-2
lines changed

‎public/docs/_examples/component-styles/e2e-spec.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
describe('Component Style Tests', function () {
2+
3+
beforeAll(function () {
4+
browser.get('');
5+
});
6+
7+
it('scopes component styles to component view', function() {
8+
var componentH1 = element(by.css('hero-app > h1'));
9+
var externalH1 = element(by.css('body > h1'));
10+
11+
expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
12+
expect(externalH1.getCssValue('fontWeight')).not.toEqual('normal');
13+
});
14+
15+
16+
it('allows styling :host element', function() {
17+
var host = element(by.css('hero-details'));
18+
19+
expect(host.getCssValue('borderWidth')).toEqual('1px');
20+
});
21+
22+
it('supports :host() in function form', function() {
23+
var host = element(by.css('hero-details'));
24+
25+
host.element(by.buttonText('Activate')).click();
26+
expect(host.getCssValue('borderWidth')).toEqual('3px');
27+
});
28+
29+
it('allows conditional :host-context() styling', function() {
30+
var h2 = element(by.css('hero-details h2'));
31+
32+
expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
33+
});
34+
35+
it('styles both view and content children with /deep/', function() {
36+
var viewH3 = element(by.css('hero-team h3'));
37+
var contentH3 = element(by.css('hero-controls h3'));
38+
39+
expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
40+
expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
41+
});
42+
43+
it('includes styles loaded with CSS @import', function() {
44+
var host = element(by.css('hero-details'));
45+
46+
expect(host.getCssValue('padding')).toEqual('10px');
47+
});
48+
49+
it('processes template inline styles', function() {
50+
var button = element(by.css('hero-controls button'));
51+
var externalButton = element(by.css('body > button'));
52+
expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
53+
expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
54+
});
55+
56+
it('processes template <link>s', function() {
57+
var li = element(by.css('hero-team li:first-child'));
58+
var externalLi = element(by.css('body > ul li'));
59+
60+
expect(li.getCssValue('listStyleType')).toEqual('square');
61+
expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
62+
});
63+
64+
it('supports relative loading with moduleId', function() {
65+
var host = element(by.css('quest-summary'));
66+
expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
67+
});
68+
69+
});

‎public/docs/_examples/component-styles/ts/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/*.js

‎public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Component, Input} from 'angular2/core';
2+
import {Hero} from './hero';
3+
import {HeroDetailsComponent} from './hero-details.component';
4+
import {HeroControlsComponent} from './hero-controls.component';
5+
import {QuestSummaryComponent} from './quest-summary.component';
6+
7+
@Component({
8+
selector: 'hero-app-main',
9+
template: `
10+
<quest-summary></quest-summary>
11+
<hero-details [hero]=hero [class.active]=hero.active>
12+
<hero-controls [hero]=hero></hero-controls>
13+
</hero-details>
14+
`,
15+
directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]
16+
})
17+
export class HeroAppMainComponent {
18+
@Input() hero: Hero;
19+
}

‎public/docs/_examples/component-styles/ts/app/hero-app.component.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {Component, HostBinding} from 'angular2/core';
2+
import {Hero} from './hero';
3+
import {HeroAppMainComponent} from './hero-app-main.component';
4+
5+
// #docregion
6+
@Component({
7+
selector: 'hero-app',
8+
template: `
9+
<h1>Tour of Heroes</h1>
10+
<hero-app-main [hero]=hero></hero-app-main>`,
11+
styles: ['h1 { font-weight: normal; }'],
12+
directives: [HeroAppMainComponent]
13+
})
14+
// #enddocregion
15+
export class HeroAppComponent {
16+
hero = new Hero(
17+
'Human Torch',
18+
['Mister Fantastic', 'Invisible Woman', 'Thing']
19+
)
20+
21+
@HostBinding('class') get themeClass() {
22+
return 'theme-light';
23+
}
24+
25+
}

‎public/docs/_examples/component-styles/ts/app/hero-controls.component.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {Component, Input} from 'angular2/core';
2+
import {Hero} from './hero';
3+
4+
// #docregion inlinestyles
5+
@Component({
6+
selector: 'hero-controls',
7+
template: `
8+
<style>
9+
button {
10+
background-color: white;
11+
border: 1px solid #777;
12+
}
13+
</style>
14+
<h3>Controls</h3>
15+
<button (click)="activate()">Activate</button>
16+
`
17+
})
18+
// #enddocregion inlinestyles
19+
export class HeroControlsComponent {
20+
21+
@Input() hero: Hero;
22+
23+
activate() {
24+
this.hero.active = true;
25+
}
26+
}

‎public/docs/_examples/component-styles/ts/app/hero-details-box.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
padding: 10px;
3+
}

‎public/docs/_examples/component-styles/ts/app/hero-details.component.css

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* #docregion import */
2+
@import 'hero-details-box.css';
3+
/* #enddocregion import */
4+
5+
/* #docregion host */
6+
:host {
7+
display: block;
8+
border: 1px solid black;
9+
}
10+
/* #enddocregion host */
11+
12+
/* #docregion hostfunction */
13+
:host(.active) {
14+
border-width: 3px;
15+
}
16+
/* #enddocregion hostfunction */
17+
18+
/* #docregion hostcontext */
19+
:host-context(.theme-light) h2 {
20+
background-color: #eef;
21+
}
22+
/* #enddocregion hostcontext */
23+
24+
/* #docregion deep */
25+
:host /deep/ h3 {
26+
font-style: italic;
27+
}
28+
/* #enddocregion deep */

‎public/docs/_examples/component-styles/ts/app/hero-details.component.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {Component, Input} from 'angular2/core';
2+
import {Hero} from './hero';
3+
import {HeroTeamComponent} from './hero-team.component';
4+
5+
// #docregion styleurls
6+
@Component({
7+
selector: 'hero-details',
8+
template: `
9+
<h2>{{hero.name}}</h2>
10+
<hero-team [hero]=hero></hero-team>
11+
<ng-content></ng-content>
12+
`,
13+
styleUrls: ['app/hero-details.component.css'],
14+
directives: [HeroTeamComponent]
15+
})
16+
export class HeroDetailsComponent {
17+
// #enddocregion styleurls
18+
19+
@Input() hero:Hero;
20+
}

‎public/docs/_examples/component-styles/ts/app/hero-team.component.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
li {
2+
list-style-type: square;
3+
}

‎public/docs/_examples/component-styles/ts/app/hero-team.component.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Component, Input} from 'angular2/core';
2+
import {Hero} from './hero';
3+
4+
// #docregion stylelink
5+
@Component({
6+
selector: 'hero-team',
7+
template: `
8+
<link rel="stylesheet" href="app/hero-team.component.css">
9+
<h3>Team</h3>
10+
<ul>
11+
<li *ngFor="#member of hero.team">
12+
{{member}}
13+
</li>
14+
</ul>`
15+
})
16+
// #enddocregion stylelink
17+
export class HeroTeamComponent {
18+
@Input() hero: Hero;
19+
}

‎public/docs/_examples/component-styles/ts/app/hero.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export class Hero {
2+
active:boolean;
3+
4+
constructor(public name:string,
5+
public team:string[]) {
6+
}
7+
}

‎public/docs/_examples/component-styles/ts/app/main.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import {bootstrap} from 'angular2/platform/browser';
2+
import {HeroAppComponent} from './hero-app.component';
3+
4+
bootstrap(HeroAppComponent);

‎public/docs/_examples/component-styles/ts/app/quest-summary.component.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:host {
2+
display: block;
3+
background-color: green;
4+
color: white;
5+
}

‎public/docs/_examples/component-styles/ts/app/quest-summary.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
No quests in progress

‎public/docs/_examples/component-styles/ts/app/quest-summary.component.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// #docplaster
2+
import {Component, ViewEncapsulation} from 'angular2/core';
3+
4+
// #docregion
5+
// Let TypeScript know about the special SystemJS __moduleName variable
6+
declare var __moduleName: string;
7+
// #enddocregion
8+
// moduleName is not set in some module loaders; set it explicitly
9+
if (!__moduleName) {
10+
__moduleName = `http://${location.host}/${location.pathname}/app/`;
11+
}
12+
console.log(`The __moduleName is ${__moduleName} `);
13+
// #docregion
14+
15+
@Component({
16+
moduleId: __moduleName,
17+
selector: 'quest-summary',
18+
// #docregion urls
19+
templateUrl: 'quest-summary.component.html',
20+
styleUrls: ['quest-summary.component.css']
21+
// #enddocregion urls
22+
// #enddocregion
23+
/*
24+
// #docregion encapsulation.native
25+
// warning: few browsers support shadow DOM encapsulation at this time
26+
encapsulation: ViewEncapsulation.Native
27+
// #enddocregion encapsulation.native
28+
*/
29+
// #docregion
30+
})
31+
export class QuestSummaryComponent { }
32+
// #enddocregion

‎public/docs/_examples/component-styles/ts/example-config.json

Whitespace-only changes.

‎public/docs/_examples/component-styles/ts/index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Component Styles</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="styles.css">
7+
8+
<!-- IE required polyfills, in this exact order -->
9+
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
10+
<script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
11+
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
12+
13+
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
14+
<script src="../node_modules/systemjs/dist/system.src.js"></script>
15+
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
16+
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
17+
<script>
18+
System.config({
19+
packages: {
20+
app: {
21+
format: 'register',
22+
defaultExtension: 'js'
23+
}
24+
}
25+
});
26+
System.import('app/main')
27+
.then(null, console.error.bind(console));
28+
</script>
29+
</head>
30+
31+
<body>
32+
<h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
33+
<hero-app></hero-app>
34+
<button style="visibility: hidden;">External button for E2E test</button>
35+
<ul style="visibility: hidden;">
36+
<li>External list for E2E test</li>
37+
</ul>
38+
</body>
39+
40+
</html>

‎public/docs/_examples/component-styles/ts/plnkr.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"description": "Component Styles",
3+
"files": [
4+
"!**/*.d.ts",
5+
"!**/*.js",
6+
"!**/*.native.*"
7+
],
8+
"tags": ["CSS"]
9+
}

‎public/docs/dart/latest/guide/_data.json

+5
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@
6262
"intro": "Attribute directives attach behavior to elements."
6363
},
6464

65+
"component-styles": {
66+
"title": "Component Styles",
67+
"intro": "Learn how to apply CSS styles to components."
68+
},
69+
6570
"hierarchical-dependency-injection": {
6671
"title": "Hierarchical Dependency Injectors",
6772
"navTitle": "Hierarchical Injectors",

‎public/docs/dart/latest/guide/component-styles.jade

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

‎public/docs/js/latest/guide/_data.json

+5
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@
6262
"intro": "Attribute directives attach behavior to elements."
6363
},
6464

65+
"component-styles": {
66+
"title": "Component Styles",
67+
"intro": "Learn how to apply CSS styles to components."
68+
},
69+
6570
"hierarchical-dependency-injection": {
6671
"title": "Hierarchical Dependency Injectors",
6772
"navTitle": "Hierarchical Injectors",

‎public/docs/js/latest/guide/component-styles.jade

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

‎public/docs/ts/latest/guide/_data.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,17 @@
5656
"nextable": true,
5757
"basics": true
5858
},
59-
59+
6060
"attribute-directives": {
6161
"title": "Attribute Directives",
6262
"intro": "Attribute directives attach behavior to elements."
6363
},
6464

65+
"component-styles": {
66+
"title": "Component Styles",
67+
"intro": "Learn how to apply CSS styles to components."
68+
},
69+
6570
"hierarchical-dependency-injection": {
6671
"title": "Hierarchical Dependency Injectors",
6772
"navTitle": "Hierarchical Injectors",
@@ -107,7 +112,7 @@
107112
"title": "TypeScript Configuration",
108113
"intro": "TypeScript configuration for Angular 2 developers"
109114
},
110-
115+
111116
"upgrade": {
112117
"title": "Upgrading from 1.x",
113118
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2."

0 commit comments

Comments
 (0)