diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html index 2e4991ea82e4..b48e4a1efab9 100644 --- a/src/demo-app/demo-app/demo-app.html +++ b/src/demo-app/demo-app/demo-app.html @@ -1,4 +1,4 @@ - + Angular Material 2 Demos - + diff --git a/src/demo-app/sidenav/sidenav-demo.html b/src/demo-app/sidenav/sidenav-demo.html index 6f885ab72e77..aaeba9c88258 100644 --- a/src/demo-app/sidenav/sidenav-demo.html +++ b/src/demo-app/sidenav/sidenav-demo.html @@ -1,6 +1,6 @@

Basic Use Case

- + Start Side Drawer
@@ -34,11 +34,11 @@

My Content

- +

Sidenav Already Opened

- + Drawer @@ -46,15 +46,15 @@

Sidenav Already Opened

- +

Dynamic Alignment Sidenav

- + Drawer
- \ No newline at end of file + diff --git a/src/demo-app/sidenav/sidenav-demo.scss b/src/demo-app/sidenav/sidenav-demo.scss index 92c7d2455dbc..9805892bd0db 100644 --- a/src/demo-app/sidenav/sidenav-demo.scss +++ b/src/demo-app/sidenav/sidenav-demo.scss @@ -1,4 +1,4 @@ -.demo-sidenav-layout { +.demo-sidenav-container { border: 3px solid black; .md-sidenav-focus-trap > .cdk-focus-trap-content { diff --git a/src/lib/sidenav/README.md b/src/lib/sidenav/README.md index 7194e991f864..3e7982ca70c1 100644 --- a/src/lib/sidenav/README.md +++ b/src/lib/sidenav/README.md @@ -1,13 +1,13 @@ # MdSidenav -MdSidenav is the side navigation component for Material 2. It is composed of two components; `` and ``. +MdSidenav is the side navigation component for Material 2. It is composed of two components: `` and ``. ## Screenshots -## `` +## `` The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop. @@ -19,8 +19,8 @@ The sidenav panel. | Name | Type | Description | | --- | --- | --- | -| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. If there is more than 1 sidenav on either side the layout will be considered invalid and none of the sidenavs will be visible or toggleable until the layout is valid again. | -| `mode` | `"over"|"push"|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. | +| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. If there is more than 1 sidenav on either side the container will be considered invalid and none of the sidenavs will be visible or toggleable until the container is valid again. | +| `mode` | `"over"|"push"|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. | | `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. | ### Events @@ -58,7 +58,7 @@ Here's a simple example of using the sidenav: ```html - + Start Sidenav.
@@ -73,23 +73,23 @@ Here's a simple example of using the sidenav: - + ``` For a fullscreen sidenav, the recommended approach is set up the DOM such that the -`md-sidenav-layout` can naturally take up the full space: +`md-sidenav-container` can naturally take up the full space: ```html - + Drawer content
Main content
- + ``` ```css -html, body, material-app, md-sidenav-layout, .my-content { +html, body, material-app, md-sidenav-container, .my-content { margin: 0; width: 100%; height: 100%; @@ -101,7 +101,7 @@ outside of the scrollable region and absolutely position it. ```html - + - `, + `, }) class BasicTestApp { openStartCount: number = 0; @@ -456,30 +456,30 @@ class BasicTestApp { @Component({ template: ` - + Closed Sidenav. - `, + `, }) class SidenavSetToOpenedFalse { } @Component({ template: ` - + Closed Sidenav. - `, + `, }) class SidenavSetToOpenedTrue { } @Component({ template: ` - + - `, + `, }) class SidenavDynamicAlign { sidenav1Align = 'start'; @@ -488,12 +488,12 @@ class SidenavDynamicAlign { @Component({ template: ` - + link1 link2 - `, + `, }) class SidenavWitFocusableElements { mode: string = 'over'; diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index d433575b487e..a05bcd011fa3 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -47,10 +47,7 @@ export class MdSidenavToggleResult { moduleId: module.id, selector: 'md-sidenav, mat-sidenav', // TODO(mmalerba): move template to separate file. - template: ` - - - `, + templateUrl: 'sidenav.html', host: { '(transitionend)': '_onTransitionEnd($event)', '(keydown)': 'handleKeydown($event)', @@ -76,7 +73,7 @@ export class MdSidenav implements AfterContentInit { /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */ private _align: 'start' | 'end' = 'start'; - /** Whether this md-sidenav is part of a valid md-sidenav-layout configuration. */ + /** Whether this md-sidenav is part of a valid md-sidenav-container configuration. */ get valid() { return this._valid; } @@ -299,25 +296,28 @@ export class MdSidenav implements AfterContentInit { } /** - * component. + * component. * * This is the parent component to one or two s that validates the state internally * and coordinates the backdrop and content styling. */ @Component({ moduleId: module.id, - selector: 'md-sidenav-layout, mat-sidenav-layout', + selector: 'md-sidenav-container, mat-sidenav-container, md-sidenav-layout, mat-sidenav-layout', // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav // changes its state. - templateUrl: 'sidenav.html', + templateUrl: 'sidenav-container.html', styleUrls: [ 'sidenav.css', 'sidenav-transitions.css', ], + host: { + 'class': 'md-sidenav-container', + }, encapsulation: ViewEncapsulation.None, }) -export class MdSidenavLayout implements AfterContentInit { +export class MdSidenavContainer implements AfterContentInit { @ContentChildren(MdSidenav) _sidenavs: QueryList; get start() { return this._start; } @@ -359,14 +359,14 @@ export class MdSidenavLayout implements AfterContentInit { } /** - * Subscribes to sidenav events in order to set a class on the main layout element when the - * sidenav is open and the backdrop is visible. This ensures any overflow on the layout element is - * properly hidden. + * Subscribes to sidenav events in order to set a class on the main container element when the + * sidenav is open and the backdrop is visible. This ensures any overflow on the container element + * is properly hidden. */ private _watchSidenavToggle(sidenav: MdSidenav): void { if (!sidenav || sidenav.mode === 'side') { return; } - sidenav.onOpen.subscribe(() => this._setLayoutClass(sidenav, true)); - sidenav.onClose.subscribe(() => this._setLayoutClass(sidenav, false)); + sidenav.onOpen.subscribe(() => this._setContainerClass(sidenav, true)); + sidenav.onClose.subscribe(() => this._setContainerClass(sidenav, false)); } /** @@ -378,8 +378,8 @@ export class MdSidenavLayout implements AfterContentInit { sidenav.onAlignChanged.subscribe(() => this._validateDrawers()); } - /** Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element. */ - private _setLayoutClass(sidenav: MdSidenav, bool: boolean): void { + /** Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-container' element. */ + private _setContainerClass(sidenav: MdSidenav, bool: boolean): void { this._renderer.setElementClass(this._element.nativeElement, 'md-sidenav-opened', bool); } @@ -504,8 +504,8 @@ export class MdSidenavLayout implements AfterContentInit { @NgModule({ imports: [CommonModule, DefaultStyleCompatibilityModeModule, A11yModule], - exports: [MdSidenavLayout, MdSidenav, DefaultStyleCompatibilityModeModule], - declarations: [MdSidenavLayout, MdSidenav], + exports: [MdSidenavContainer, MdSidenav, DefaultStyleCompatibilityModeModule], + declarations: [MdSidenavContainer, MdSidenav], }) export class MdSidenavModule { static forRoot(): ModuleWithProviders {