skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(): add toolbar component

Browse Source
This commit is contained in:
DevVersion
2016-03-13 20:24:41 +01:00
parent 1c24278d62
commit c5a0515897
10 changed files with 333 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/toolbar/README.md
+68
View File
@@ -0,0 +1,68 @@
# MdToolbar
`MdToolbar` is a vertical aligned bar, which can hold the application title or actions.
### Screenshots
![Preview](https://cloud.githubusercontent.com/assets/4987015/13727769/6d952c78-e900-11e5-890a-ccfd46996812.png)
## `<md-toolbar>`
### Bound Properties
| Name | Type | Description |
| --- | --- | --- |
| `color` | `"primary" | "accent" | "warn"` | The color palette for the toolbar |
### Notes
The `md-toolbar` component will use by default the background palette.
### Examples
A basic toolbar would have the following markup.
```html
<md-toolbar [color]="myColor">
<span>My Application Title</span>
</md-toolbar>
```
Toolbars can also have multiple rows.<br/>
Multiple rows inside of a `md-toolbar` can be added by appending as many as needed `<md-toolbar-row>` elements.
```html
<md-toolbar [color]="myColor">
<span>First Row</span>
<md-toolbar-row>
<span>Second Row</span>
</md-toolbar-row>
<md-toolbar-row>
<span>Third Row</span>
</md-toolbar-row>
</md-toolbar>
```
### Alignment
The alingment inside of a toolbar row can be easily done by using the flexbox layout.<br/>
For example, the following markup aligns the items on the `right`.
Custom HTML
```html
<md-toolbar color="primary">
<span>Application Title</span>
<!-- This fills the remaining space of the current row -->
<span class="example-fill-remaining-space"></span>
<span>Right Aligned Text</span>
</md-toolbar>
```
Custom SCSS
```scss
.example-fill-remaining-space {
// This fills the remaining space, by using flexbox.
// Every toolbar row uses a flexbox row layout.
flex: 1 1 auto;
}
```
Output
![image](https://cloud.githubusercontent.com/assets/4987015/13730760/0864894e-e959-11e5-9312-7f3cb990d80a.png)
src/components/toolbar/toolbar.html
+6
View File
@@ -0,0 +1,6 @@
<div class="md-toolbar-layout">
<md-toolbar-row>
<ng-content></ng-content>
</md-toolbar-row>
<ng-content select="md-toolbar-row"></ng-content>
</div>
src/components/toolbar/toolbar.scss
+57
View File
@@ -0,0 +1,57 @@
@import "variables";
@import "mixins";
@import "default-theme"; //TODO: remove that soon.
$md-toolbar-min-height: 64px !default;
$md-toolbar-font-size: 20px !default;
$md-toolbar-padding: 16px !default;
@mixin toolbar-theme($palette) {
background: md-color($palette);
color: md-color($palette, default-contrast);
}
:host {
display: flex;
box-sizing: border-box;
width: 100%;
min-height: $md-toolbar-min-height;
// Font Styling
font-size: $md-toolbar-font-size;
font-weight: 400;
font-family: $md-font-family;
padding: 0 $md-toolbar-padding;
flex-direction: column;
background: md-color($md-background, app-bar);
color: md-color($md-foreground, text);
&.md-primary {
@include toolbar-theme($md-primary);
}
&.md-accent {
@include toolbar-theme($md-accent);
}
&.md-warn {
@include toolbar-theme($md-warn);
}
md-toolbar-row {
display: flex;
box-sizing: border-box;
width: 100%;
height: $md-toolbar-min-height;
// Flexbox Vertical Alignment
flex-direction: row;
align-items: center;
}
}
src/components/toolbar/toolbar.spec.ts
+64
View File
@@ -0,0 +1,64 @@
import {Component} from 'angular2/core';
import {
inject,
TestComponentBuilder
} from 'angular2/testing';
import {
it,
iit,
describe,
ddescribe,
expect,
beforeEach,
} from '../../core/facade/testing';
import {By} from 'angular2/platform/browser';
import {MdToolbar} from './toolbar';
export function main() {
describe('MdToolbar', () => {
let builder: TestComponentBuilder;
beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
builder = tcb;
}));
it('should apply class based on color attribute', (done: () => void) => {
return builder.createAsync(TestApp).then((fixture) => {
let testComponent = fixture.debugElement.componentInstance;
let toolbarDebugElement = fixture.debugElement.query(By.css('md-toolbar'));
testComponent.toolbarColor = 'primary';
fixture.detectChanges();
expect(toolbarDebugElement.nativeElement.classList.contains('md-primary')).toBe(true);
testComponent.toolbarColor = 'accent';
fixture.detectChanges();
expect(toolbarDebugElement.nativeElement.classList.contains('md-accent')).toBe(true);
testComponent.toolbarColor = 'warn';
fixture.detectChanges();
expect(toolbarDebugElement.nativeElement.classList.contains('md-warn')).toBe(true);
done();
});
});
});
}
@Component({
selector: 'test-app',
template: `
<md-toolbar [color]="toolbarColor">
<span>Test Toolbar</span>
</md-toolbar>
`,
directives: [MdToolbar]
})
class TestApp {
toolbarColor: string;
}
src/components/toolbar/toolbar.ts
+42
View File
@@ -0,0 +1,42 @@
import {
Component,
ChangeDetectionStrategy,
Input
} from 'angular2/core';
import {Renderer} from 'angular2/core';
import {ElementRef} from 'angular2/core';
@Component({
selector: 'md-toolbar',
templateUrl: './components/toolbar/toolbar.html',
styleUrls: ['./components/toolbar/toolbar.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MdToolbar {
private _color: string;
constructor(private elementRef: ElementRef, private renderer: Renderer) { }
@Input()
get color(): string {
return this._color;
}
set color(value: string) {
this._updateColor(value);
}
_updateColor(newColor: string) {
if (this._color != null && this._color != '') {
this.renderer.setElementClass(this.elementRef.nativeElement, `md-${newColor}`, false);
}
if (newColor != null && newColor != '') {
this.renderer.setElementClass(this.elementRef.nativeElement, `md-${newColor}`, true);
}
this._color = newColor;
}
}
src/demo-app/demo-app.html
+1
View File
@@ -7,6 +7,7 @@
<li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
<li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
<li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
<li><a [routerLink]="['ToolbarDemo']">Toolbar demo</a></li>
</ul>
<button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
{{root.dir.toUpperCase()}}
src/demo-app/demo-app.ts
+3 -1
View File
@@ -8,6 +8,7 @@ import {CheckboxDemo} from './checkbox/checkbox-demo';
import {Dir} from '../core/rtl/dir';
import {MdButton} from '../components/button/button';
import {PortalDemo} from './portal/portal-demo';
import {ToolbarDemo} from './toolbar/toolbar-demo';
@Component({
@@ -31,6 +32,7 @@ export class Home {}
new Route({path: '/sidenav', name: 'SidenavDemo', component: SidenavDemo}),
new Route({path: '/progress-circle', name: 'ProgressCircleDemo', component: ProgressCircleDemo}),
new Route({path: '/portal', name: 'PortalDemo', component: PortalDemo}),
new Route({path: '/checkbox', name: 'CheckboxDemo', component: CheckboxDemo})
new Route({path: '/checkbox', name: 'CheckboxDemo', component: CheckboxDemo}),
new Route({path: '/toolbar', name: 'ToolbarDemo', component: ToolbarDemo}),
])
export class DemoApp { }
src/demo-app/toolbar/toolbar-demo.html
+68
View File
@@ -0,0 +1,68 @@
<div class="demo-toolbar">
<p>
<md-toolbar>
<i class="material-icons demo-toolbar-icon">menu</i>
<span>Default Toolbar</span>
<span class="demo-fill-remaining"></span>
<i class="material-icons">code</i>
</md-toolbar>
</p>
<p>
<md-toolbar color="primary">
<i class="material-icons demo-toolbar-icon">menu</i>
<span>Primary Toolbar</span>
<span class="demo-fill-remaining"></span>
<i class="material-icons">code</i>
</md-toolbar>
</p>
<p>
<md-toolbar color="accent">
<i class="material-icons demo-toolbar-icon">menu</i>
<span>Accent Toolbar</span>
<span class="demo-fill-remaining"></span>
<i class="material-icons">code</i>
</md-toolbar>
</p>
<p>
<md-toolbar color="accent">
<span>Custom Toolbar</span>
<md-toolbar-row>
<span>Second Line</span>
</md-toolbar-row>
</md-toolbar>
</p>
<p>
<md-toolbar color="primary">
<span>Custom Toolbar</span>
<md-toolbar-row>
<span>Second Line</span>
<span class="demo-fill-remaining"></span>
<i class="material-icons demo-toolbar-icon">verified_user</i>
</md-toolbar-row>
<md-toolbar-row>
<span>Third Line</span>
<span class="demo-fill-remaining"></span>
<i class="material-icons demo-toolbar-icon">favorite</i>
<i class="material-icons demo-toolbar-icon">delete</i>
</md-toolbar-row>
</md-toolbar>
</p>
</div>
src/demo-app/toolbar/toolbar-demo.scss
+12
View File
@@ -0,0 +1,12 @@
.demo-toolbar {
padding: 6px;
.demo-toolbar-icon {
padding: 0 14px 0 14px;
}
.demo-fill-remaining {
flex: 1 1 auto;
}
}
src/demo-app/toolbar/toolbar-demo.ts
+12
View File
@@ -0,0 +1,12 @@
import {Component} from 'angular2/core';
import {MdToolbar} from '../../components/toolbar/toolbar';
@Component({
selector: 'toolbar-demo',
templateUrl: 'demo-app/toolbar/toolbar-demo.html',
styleUrls: ['demo-app/toolbar/toolbar-demo.css'],
directives: [MdToolbar]
})
export class ToolbarDemo {
}