-
\ 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
+
diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss
index a27fed7958f1..0d62c3c70975 100644
--- a/src/lib/sidenav/sidenav.scss
+++ b/src/lib/sidenav/sidenav.scss
@@ -40,9 +40,9 @@
transform: translate3d(0, 0, 0);
}
-md-sidenav-layout {
+.md-sidenav-container {
// We need a stacking context here so that the backdrop and drawers are clipped to the
- // MdSidenavLayout. This creates a new z-index stack so we use low numbered z-indices.
+ // MdSidenavContainer. This creates a new z-index stack so we use low numbered z-indices.
// We create another stacking context in the '.md-sidenav-content' and in each sidenav so that
// the application content does not get messed up with our own CSS.
@include md-sidenav-stacking-context();
diff --git a/src/lib/sidenav/sidenav.spec.ts b/src/lib/sidenav/sidenav.spec.ts
index 34062c9e9d39..a977b119f8c1 100644
--- a/src/lib/sidenav/sidenav.spec.ts
+++ b/src/lib/sidenav/sidenav.spec.ts
@@ -23,8 +23,8 @@ describe('MdSidenav', () => {
imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), PlatformModule.forRoot()],
declarations: [
BasicTestApp,
- SidenavLayoutTwoSidenavTestApp,
- SidenavLayoutNoSidenavTestApp,
+ SidenavContainerTwoSidenavTestApp,
+ SidenavContainerNoSidenavTestApp,
SidenavSetToOpenedFalse,
SidenavSetToOpenedTrue,
SidenavDynamicAlign,
@@ -397,24 +397,24 @@ describe('MdSidenav', () => {
});
-/** Test component that contains an MdSidenavLayout but no MdSidenav. */
-@Component({template: ``})
-class SidenavLayoutNoSidenavTestApp { }
+/** Test component that contains an MdSidenavContainer but no MdSidenav. */
+@Component({template: ``})
+class SidenavContainerNoSidenavTestApp { }
-/** Test component that contains an MdSidenavLayout and 2 MdSidenav on the same side. */
+/** Test component that contains an MdSidenavContainer and 2 MdSidenav on the same side. */
@Component({
template: `
-
+
- `,
+ `,
})
-class SidenavLayoutTwoSidenavTestApp { }
+class SidenavContainerTwoSidenavTestApp { }
-/** Test component that contains an MdSidenavLayout and one MdSidenav. */
+/** Test component that contains an MdSidenavContainer and one MdSidenav. */
@Component({
template: `
-
+
- `,
+ `,
})
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: `
-
+ link1link2
- `,
+ `,
})
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 {