diff --git a/src/lib/sidenav/README.md b/src/lib/sidenav/README.md index 0601c9e29ef3..d9e0e12aab51 100644 --- a/src/lib/sidenav/README.md +++ b/src/lib/sidenav/README.md @@ -1,166 +1 @@ -**NOTE: The mat-sidenav-layout element is deprecated. mat-sidenav-container -should be used instead.** - - -# MatSidenav - -MatSidenav is the side navigation component for Angular Material. It is composed of two components: `` and ``. - -## Screenshots - - - - -## `` - -The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop. - -## `` - -The sidenav panel. - -### Bound Properties - -| Name | Type | Description | -| --- | --- | --- | -| `position` | `"start"\|"end"` | The position 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 - -| Name | Description | -| --- | --- | -| `open-start` | Emitted when the sidenav is starting opening. This should only be used to coordinate animations. | -| `close-start` | Emitted when the sidenav is starting closing. This should only be used to coordinate animations. | -| `open` | Emitted when the sidenav is done opening. Use this for, e.g., setting focus on controls or updating state. | -| `close` | Emitted when the sidenav is done closing. | - -### Methods - -| Signature | Description | -| --- | --- | -| `open(): Promise` | Open the sidenav. Equivalent to `opened = true`. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled. | -| `close(): Promise` | Close the sidenav. Equivalent to `opened = false`. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled. | -| `toggle(): Promise` | Toggle the sidenav. This is equivalent to `opened = !opened`. Returns a promise that will resolve when the animation completes, or be rejected if the animation was cancelled. | - -### Notes - -The `` will resize based on its content. You can also set its width in CSS, like so: - -```css -mat-sidenav { - width: 200px; -} -``` - -Try to avoid percent based width as `resize` events are not (yet) supported. - -## Examples - -Here's a simple example of using the sidenav: - -```html - - - - Start Sidenav. -
- - - - End Sidenav. - - - - My regular content. This will be moved into the proper DOM at runtime. - - - - - -``` - -For a fullscreen sidenav, the recommended approach is set up the DOM such that the -`mat-sidenav-container` can naturally take up the full space: - -```html - - - Drawer content -
Main content
- - -``` -```css -html, body, material-app, mat-sidenav-container, .my-content { - margin: 0; - width: 100%; - height: 100%; -} -``` - -For a sidenav with a FAB (or other floating element), the recommended approach is to place the FAB -outside of the scrollable region and absolutely position it. - -```html - - - - -
- Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, - fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam - nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna - aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor - vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, - ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu - enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, - tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. - Taciti dui, sapien consectetuer. -
- - -
- Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce - vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id, - neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna. - Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat - cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui - sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu - erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, tristique vehicula nibh - ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien - consectetuer. -
- - -``` -```css -.my-container { - width: 500px; - height: 300px; -} - -.my-container .mat-sidenav { - max-width: 200px; -} - -.my-container .mat-sidenav-content, -.my-container mat-sidenav { - display: flex; -} - -.my-scrolling-content { - overflow: auto; -} - -button.my-fab { - position: absolute; - right: 20px; - bottom: 10px; -} -``` +Please see the official documentation at https://material.angular.io/components/component/sidenav diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md index cdbcaff0baa8..139c40616ece 100644 --- a/src/lib/sidenav/sidenav.md +++ b/src/lib/sidenav/sidenav.md @@ -1,44 +1,140 @@ -`` is a panel that can be placed next to or above some primary content. A sidenav is -typically used for navigation, but can contain any content. +Angular Material provides two sets of components designed to add collapsible side content (often +navigation, though it can be any content) alongside some primary content. These are the sidenav and +drawer components. + +The sidenav components are designed to add side content to a fullscreen app. To set up a sidenav we +use three components: `` which acts as a structural container for our content +and sidenav, `` which represents the main content, and `` which +represents the added side content. -The sidenav and its associated content live inside of an ``: +The drawer component is designed to add side content to a small section of your app. This is +accomplished using the ``, ``, and `` +components, which are analogous to their sidenav equivalents. Rather than adding side content to the +app as a whole, these are designed to add side content to a small section of your app. They support +almost all of the same features, but do not support fixed positioning. + + + +### Specifying the main and side content + +Both the main and side content should be placed inside of the ``, content +that you don't want to be affected by the sidenav, such as a header or footer, can be placed outside +of the container. + +The side content should be wrapped in a `` element. The `position` property can be used +to specify which end of the main content to place the side content on. `position` can be either +`start` or `end` which places the side content on the left or right respectively in left-to-right +languages. If the `position` is not set, the default value of `start` will be assumed. A +`` can have up to two `` elements total, but only one for any +given side. + +The main content should be wrapped in a ``. If no `` is +specified for a ``, one will be created implicitly and all of the content +inside the `` other than the `` elements will be placed inside +of it. + + + +The following are examples of valid sidenav layouts: + ```html + - - - + Start + Main + +``` - +```html + + + Start + End +
Main
 ``` -A sidenav container may contain one or two `` elements. When there are two -`` elements, each must be placed on a different side of the container. -See the section on positioning below. +```html + + +``` + +And these are examples of invalid sidenav layouts: + +```html + + + Start + Start 2 + +``` + +```html + + + Main + Main 2 + +``` + +```html + + + +``` + +These same rules all apply to the drawer components as well. + +### Opening and closing a sidenav + +A `` can be opened or closed using the `open()`, `close()` and `toggle()` methods. Each +of these methods returns a `Promise` that will be resolved with `true` when the sidenav +finishes opening or `false` when it finishes closing. + +The opened state can also be set via a property binding in the template using the `opened` property. +The property supports 2-way binding. + +`` also supports output properties for just open and just close events, The `(opened)` +and `(closed)` properties respectively. + + + +All of these properties and methods work on `` as well. + +### Changing the sidenav's behavior -### Sidenav mode -The sidenav can render in one of three different ways based on the `mode` property. +The `` can render in one of three different ways based on the `mode` property. -| Mode | Description | -|------|-------------------------------------------------------------------------------------------| -| over | Sidenav floats _over_ the primary content, which is covered by a backdrop | -| push | Sidenav _pushes_ the primary content out of its way, also covering it with a backdrop | -| side | Sidenav appears _side-by-side_ with the primary content | +| Mode | Description | +|--------|-----------------------------------------------------------------------------------------| +| `over` | Sidenav floats over the primary content, which is covered by a backdrop | +| `push` | Sidenav pushes the primary content out of its way, also covering it with a backdrop | +| `side` | Sidenav appears side-by-side with the main content, shrinking the main content's width to make space for the sidenav. | -Using the `side` mode on mobile devices can affect the performance and is also not recommended by the -[Material Design specification](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior). +If no `mode` is specified, `over` is used by default. -### Positioning the sidenav -The `position` property determines whether the sidenav appears at the `"start"` or `"end"` of the -container. This is affected by the current text direction ("ltr" or "rtl"). By default, the sidenav -appears at the start of the container. + +`` also supports all of these same modes. -### Sizing the sidenav -The `` will, by default, fit the size of its content. The width can be explicitly set -via CSS: +### Disabling automatic close + +Clicking on the backdrop or pressing the Esc key will normally close an open sidenav. +However, this automatic closing behavior can be disabled by setting the `disableClose` property on +the `` or `` that you want to disable the behavior for. + +Custom handling for Esc can be done by adding a keydown listener to the ``. +Custom handling for backdrop clicks can be done via the `(backdropClick)` output property on +``. + + + +### Setting the sidenav's size + +The `` and `` will, by default, fit the size of its content. The width can +be explicitly set via CSS: ```css mat-sidenav { @@ -48,37 +144,42 @@ mat-sidenav { Try to avoid percent based width as `resize` events are not (yet) supported. -For a fullscreen sidenav, the recommended approach is set up the DOM such that the -`` can naturally take up the full space: +### Fixed position sidenavs -```html - - - Drawer content -
Main content
- - -``` -```css -html, body, material-app, mat-sidenav-container, .my-content { - margin: 0; - width: 100%; - height: 100%; -} -``` +For `` only (not ``) fixed positioning is supported. It can be enabled by +setting the `fixedInViewport` property. Additionally, top and bottom space can be set via the +`fixedTopGap` and `fixedBottomGap`. These properties accept a pixel value amount of space to add at +the top or bottom. -### FABs inside sidenav -For a sidenav with a FAB (Floating Action Button) or other floating element, the recommended approach is to place the FAB -outside of the scrollable region and absolutely position it. + +### Creating a responsive layout for mobile & desktop -### Disabling closing of sidenav -By default, sidenav can be closed either by clicking on the backdrop or by pressing ESCAPE. -The `disableClose` attribute can be set on `mat-sidenav` to disable automatic closing when the backdrop -is clicked or ESCAPE is pressed. To add custom logic on backdrop click, add a `(backdropClick)` listener to -`mat-sidenav-container`. For custom ESCAPE logic, a standard `(keydown)` listener will suffice. -```html - - - -``` +A sidenav often needs to behave differently on a mobile vs a desktop display. On a desktop, it may +make sense to have just the content section scroll. However, on mobile you often want the body to be +the element that scrolls; this allows the address bar to auto-hide. The sidenav can be styled with +CSS to adjust to either type of device. + + + +### Accessibility + +The `` an `` should each be given an appropriate `role` attribute +depending on the context in which they are used. + +For example, a `` that contains links +to other pages might be marked `role="navigation"`, whereas one that contains a table of +contents about might be marked as `role="directory"`. If there is no more specific role that +describes your sidenav, `role="region"` is recommended. + +Similarly, the `` should be given a role based on what it contains. If it +represents the primary content of the page, it may make sense to mark it `role="main"`. If no more +specific role makes sense, `role="region"` is again a good fallback. + +### Troubleshooting + +#### Error: A drawer was already declared for 'position="..."' + +This error is thrown if you have more than one sidenav or drawer in a given container with the same +`position`. The `position` property defaults to `start`, so the issue may just be that you forgot to +mark the `end` sidenav with `position="end"`. diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts index 1fd0719e1055..3d02d1e28ec4 100644 --- a/src/material-examples/example-module.ts +++ b/src/material-examples/example-module.ts @@ -96,8 +96,14 @@ import {SelectOverviewExample} from './select-overview/select-overview-example'; import {SelectPanelClassExample} from './select-panel-class/select-panel-class-example'; import {SelectResetExample} from './select-reset/select-reset-example'; import {SelectValueBindingExample} from './select-value-binding/select-value-binding-example'; -import {SidenavFabExample} from './sidenav-fab/sidenav-fab-example'; +import {SidenavDisableCloseExample} from './sidenav-disable-close/sidenav-disable-close-example'; +import {SidenavDrawerOverviewExample} from './sidenav-drawer-overview/sidenav-drawer-overview-example'; +import {SidenavFixedExample} from './sidenav-fixed/sidenav-fixed-example'; +import {SidenavModeExample} from './sidenav-mode/sidenav-mode-example'; +import {SidenavOpenCloseExample} from './sidenav-open-close/sidenav-open-close-example'; import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example'; +import {SidenavPositionExample} from './sidenav-position/sidenav-position-example'; +import {SidenavResponsiveExample} from './sidenav-responsive/sidenav-responsive-example'; import {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-toggle-configurable-example'; import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example'; import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example'; @@ -619,18 +625,54 @@ export const EXAMPLE_COMPONENTS = { additionalFiles: null, selectorName: null }, - 'sidenav-fab': { - title: 'Sidenav with a FAB', - component: SidenavFabExample, + 'sidenav-disable-close': { + title: 'Sidenav with custom escape and backdrop click behavior ', + component: SidenavDisableCloseExample, + additionalFiles: null, + selectorName: null + }, + 'sidenav-drawer-overview': { + title: 'Basic drawer ', + component: SidenavDrawerOverviewExample, + additionalFiles: null, + selectorName: null + }, + 'sidenav-fixed': { + title: 'Fixed sidenav ', + component: SidenavFixedExample, + additionalFiles: null, + selectorName: null + }, + 'sidenav-mode': { + title: 'Sidenav with configurable mode ', + component: SidenavModeExample, + additionalFiles: null, + selectorName: null + }, + 'sidenav-open-close': { + title: 'Sidenav open & close behavior ', + component: SidenavOpenCloseExample, additionalFiles: null, selectorName: null }, 'sidenav-overview': { - title: 'Basic sidenav', + title: 'Basic sidenav ', component: SidenavOverviewExample, additionalFiles: null, selectorName: null }, + 'sidenav-position': { + title: 'Implicit main content with two sidenavs ', + component: SidenavPositionExample, + additionalFiles: null, + selectorName: null + }, + 'sidenav-responsive': { + title: 'Responsive sidenav ', + component: SidenavResponsiveExample, + additionalFiles: null, + selectorName: null + }, 'slide-toggle-configurable': { title: 'Configurable slide-toggle', component: SlideToggleConfigurableExample, @@ -843,8 +885,14 @@ export const EXAMPLE_LIST = [ SelectPanelClassExample, SelectResetExample, SelectValueBindingExample, - SidenavFabExample, + SidenavDisableCloseExample, + SidenavDrawerOverviewExample, + SidenavFixedExample, + SidenavModeExample, + SidenavOpenCloseExample, SidenavOverviewExample, + SidenavPositionExample, + SidenavResponsiveExample, SlideToggleConfigurableExample, SlideToggleFormsExample, SlideToggleOverviewExample, diff --git a/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.css b/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.css new file mode 100644 index 000000000000..bbb6e4d125d5 --- /dev/null +++ b/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.css @@ -0,0 +1,7 @@ +.example-container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} diff --git a/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.html b/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.html new file mode 100644 index 000000000000..3e31d7906011 --- /dev/null +++ b/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.html @@ -0,0 +1,13 @@ + + +

+ + + +

+

Closed due to: {{reason}}

+ + + +
Please open in Plunker to see result
diff --git a/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.ts b/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.ts new file mode 100644 index 000000000000..db846639fc6e --- /dev/null +++ b/src/material-examples/sidenav-disable-close/sidenav-disable-close-example.ts @@ -0,0 +1,21 @@ +import {Component, ViewChild} from '@angular/core'; +import {MatSidenav} from '@angular/material/sidenav'; + +/** @title Sidenav with custom escape and backdrop click behavior */ +@Component({ + selector: 'sidenav-disable-close-example', + templateUrl: 'sidenav-disable-close-example.html', + styleUrls: ['sidenav-disable-close-example.css'], +}) +export class SidenavDisableCloseExample { + @ViewChild('sidenav') sidenav: MatSidenav; + + reason = ''; + + close(reason: string) { + this.reason = reason; + this.sidenav.close(); + } + + shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host)); +} diff --git a/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.css b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.css new file mode 100644 index 000000000000..d0bcca980f2f --- /dev/null +++ b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.css @@ -0,0 +1,6 @@ +.example-container { + width: 400px; + height: 200px; + margin: 10px; + border: 1px solid #555; +} diff --git a/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html new file mode 100644 index 000000000000..2dca0fd6723a --- /dev/null +++ b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html @@ -0,0 +1,4 @@ + + Drawer content + Main content + diff --git a/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.ts b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.ts new file mode 100644 index 000000000000..e60b6f300883 --- /dev/null +++ b/src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.ts @@ -0,0 +1,9 @@ +import {Component} from '@angular/core'; + +/** @title Basic drawer */ +@Component({ + selector: 'sidenav-drawer-overview-example', + templateUrl: 'sidenav-drawer-overview-example.html', + styleUrls: ['sidenav-drawer-overview-example.css'], +}) +export class SidenavDrawerOverviewExample {} diff --git a/src/material-examples/sidenav-fab/sidenav-fab-example.css b/src/material-examples/sidenav-fab/sidenav-fab-example.css deleted file mode 100644 index 80b88561b599..000000000000 --- a/src/material-examples/sidenav-fab/sidenav-fab-example.css +++ /dev/null @@ -1,26 +0,0 @@ -.example-sidenav-fab-container { - width: 500px; - height: 300px; - border: 1px solid rgba(0, 0, 0, 0.5); -} - -.example-sidenav-fab-container mat-sidenav { - max-width: 200px; -} - -.example-sidenav-fab-container .mat-sidenav-content, -.example-sidenav-fab-container mat-sidenav { - display: flex; - overflow: visible; -} - -.example-scrolling-content { - overflow: auto; - height: 100%; -} - -.example-fab.mat-mini-fab { - position: absolute; - right: 20px; - bottom: 10px; -} diff --git a/src/material-examples/sidenav-fab/sidenav-fab-example.html b/src/material-examples/sidenav-fab/sidenav-fab-example.html deleted file mode 100644 index 9053ced258a3..000000000000 --- a/src/material-examples/sidenav-fab/sidenav-fab-example.html +++ /dev/null @@ -1,32 +0,0 @@ - - - -
- Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, - fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam - nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna - aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor - vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, - ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu - enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, - tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. - Taciti dui, sapien consectetuer. -
- - -
- Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce - vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id, - neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna. - Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat - cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui - sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu - erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, tristique vehicula nibh - ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien - consectetuer. -
- diff --git a/src/material-examples/sidenav-fab/sidenav-fab-example.ts b/src/material-examples/sidenav-fab/sidenav-fab-example.ts deleted file mode 100644 index 4af25f478ac0..000000000000 --- a/src/material-examples/sidenav-fab/sidenav-fab-example.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {Component, ViewEncapsulation} from '@angular/core'; - -/** - * @title Sidenav with a FAB - */ -@Component({ - selector: 'sidenav-fab-example', - templateUrl: 'sidenav-fab-example.html', - styleUrls: ['sidenav-fab-example.css'], - encapsulation: ViewEncapsulation.None, - preserveWhitespaces: false, -}) -export class SidenavFabExample {} diff --git a/src/material-examples/sidenav-fixed/sidenav-fixed-example.css b/src/material-examples/sidenav-fixed/sidenav-fixed-example.css new file mode 100644 index 000000000000..80ee151fecae --- /dev/null +++ b/src/material-examples/sidenav-fixed/sidenav-fixed-example.css @@ -0,0 +1,29 @@ +.example-container { + position: absolute; + top: 60px; + bottom: 60px; + left: 0; + right: 0; +} + +.example-sidenav { + display: flex; + align-items: center; + justify-content: center; + width: 200px; + background: rgba(255, 0, 0, 0.5); +} + +.example-header { + position: fixed; + top: 0; + left: 0; + right: 0; +} + +.example-footer { + position: fixed; + bottom: 0; + left: 0; + right: 0; +} diff --git a/src/material-examples/sidenav-fixed/sidenav-fixed-example.html b/src/material-examples/sidenav-fixed/sidenav-fixed-example.html new file mode 100644 index 000000000000..34ae66792f69 --- /dev/null +++ b/src/material-examples/sidenav-fixed/sidenav-fixed-example.html @@ -0,0 +1,26 @@ + + Header + + + + {{options.value.fixed ? 'Fixed' : 'Non-fixed'}} Sidenav + + + +

Fixed

+

+ +

+

+ +

+

+ + + + Footer + + +
Please open in Plunker to see result
diff --git a/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts b/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts new file mode 100644 index 000000000000..910987f44e14 --- /dev/null +++ b/src/material-examples/sidenav-fixed/sidenav-fixed-example.ts @@ -0,0 +1,22 @@ +import {Component} from '@angular/core'; +import {FormBuilder, FormGroup} from '@angular/forms'; + +/** @title Fixed sidenav */ +@Component({ + selector: 'sidenav-fixed-example', + templateUrl: 'sidenav-fixed-example.html', + styleUrls: ['sidenav-fixed-example.css'], +}) +export class SidenavFixedExample { + options: FormGroup; + + constructor(fb: FormBuilder) { + this.options = fb.group({ + 'fixed': false, + 'top': 0, + 'bottom': 0, + }); + } + + shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host)); +} diff --git a/src/material-examples/sidenav-mode/sidenav-mode-example.css b/src/material-examples/sidenav-mode/sidenav-mode-example.css new file mode 100644 index 000000000000..cd425d420f9c --- /dev/null +++ b/src/material-examples/sidenav-mode/sidenav-mode-example.css @@ -0,0 +1,14 @@ +.example-container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.example-radio-group { + display: block; + border: 1px solid #555; + margin: 20px; + padding: 10px; +} diff --git a/src/material-examples/sidenav-mode/sidenav-mode-example.html b/src/material-examples/sidenav-mode/sidenav-mode-example.html new file mode 100644 index 000000000000..914beb053760 --- /dev/null +++ b/src/material-examples/sidenav-mode/sidenav-mode-example.html @@ -0,0 +1,27 @@ + + +

+

+ + + Over + Side + Push + +

+ + + +

+

+ + + Over + Side + Push + +

+ + + +
Please open in Plunker to see result
diff --git a/src/material-examples/sidenav-mode/sidenav-mode-example.ts b/src/material-examples/sidenav-mode/sidenav-mode-example.ts new file mode 100644 index 000000000000..790ba5d2641c --- /dev/null +++ b/src/material-examples/sidenav-mode/sidenav-mode-example.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; + +/** @title Sidenav with configurable mode */ +@Component({ + selector: 'sidenav-mode-example', + templateUrl: 'sidenav-mode-example.html', + styleUrls: ['sidenav-mode-example.css'], +}) +export class SidenavModeExample { + mode = new FormControl('over'); + + shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host)); +} diff --git a/src/material-examples/sidenav-open-close/sidenav-open-close-example.css b/src/material-examples/sidenav-open-close/sidenav-open-close-example.css new file mode 100644 index 000000000000..5b1c758d33f9 --- /dev/null +++ b/src/material-examples/sidenav-open-close/sidenav-open-close-example.css @@ -0,0 +1,14 @@ +.example-container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.example-events { + width: 300px; + height: 200px; + overflow: auto; + border: 1px solid #555; +} diff --git a/src/material-examples/sidenav-open-close/sidenav-open-close-example.html b/src/material-examples/sidenav-open-close/sidenav-open-close-example.html new file mode 100644 index 000000000000..cbd4e985ccb1 --- /dev/null +++ b/src/material-examples/sidenav-open-close/sidenav-open-close-example.html @@ -0,0 +1,17 @@ + + + Sidenav content + + + +

sidenav.opened

+

+

Events:

+
+
{{e}}
+
+ + + +
Please open in Plunker to see result
diff --git a/src/material-examples/sidenav-open-close/sidenav-open-close-example.ts b/src/material-examples/sidenav-open-close/sidenav-open-close-example.ts new file mode 100644 index 000000000000..05d50e563018 --- /dev/null +++ b/src/material-examples/sidenav-open-close/sidenav-open-close-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + +/** @title Sidenav open & close behavior */ +@Component({ + selector: 'sidenav-open-close-example', + templateUrl: 'sidenav-open-close-example.html', + styleUrls: ['sidenav-open-close-example.css'], +}) +export class SidenavOpenCloseExample { + events = []; + + shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host)); +} diff --git a/src/material-examples/sidenav-overview/sidenav-overview-example.css b/src/material-examples/sidenav-overview/sidenav-overview-example.css index 8ab00588bb34..bbb6e4d125d5 100644 --- a/src/material-examples/sidenav-overview/sidenav-overview-example.css +++ b/src/material-examples/sidenav-overview/sidenav-overview-example.css @@ -1,16 +1,7 @@ .example-container { - width: 500px; - height: 300px; - border: 1px solid rgba(0, 0, 0, 0.5); -} - -.example-sidenav-content { - display: flex; - height: 100%; - align-items: center; - justify-content: center; -} - -.example-sidenav { - padding: 20px; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } diff --git a/src/material-examples/sidenav-overview/sidenav-overview-example.html b/src/material-examples/sidenav-overview/sidenav-overview-example.html index 9069c886c896..ead38a51451e 100644 --- a/src/material-examples/sidenav-overview/sidenav-overview-example.html +++ b/src/material-examples/sidenav-overview/sidenav-overview-example.html @@ -1,12 +1,6 @@ - - - Jolly good! - - -
- -
- + + Sidenav content + Main content + +
Please open in Plunker to see result
diff --git a/src/material-examples/sidenav-overview/sidenav-overview-example.ts b/src/material-examples/sidenav-overview/sidenav-overview-example.ts index 5496f3f45fee..8222f8b9e56c 100644 --- a/src/material-examples/sidenav-overview/sidenav-overview-example.ts +++ b/src/material-examples/sidenav-overview/sidenav-overview-example.ts @@ -1,11 +1,11 @@ import {Component} from '@angular/core'; -/** - * @title Basic sidenav - */ +/** @title Basic sidenav */ @Component({ selector: 'sidenav-overview-example', templateUrl: 'sidenav-overview-example.html', styleUrls: ['sidenav-overview-example.css'], }) -export class SidenavOverviewExample {} +export class SidenavOverviewExample { + shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host)); +} diff --git a/src/material-examples/sidenav-position/sidenav-position-example.css b/src/material-examples/sidenav-position/sidenav-position-example.css new file mode 100644 index 000000000000..bbb6e4d125d5 --- /dev/null +++ b/src/material-examples/sidenav-position/sidenav-position-example.css @@ -0,0 +1,7 @@ +.example-container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} diff --git a/src/material-examples/sidenav-position/sidenav-position-example.html b/src/material-examples/sidenav-position/sidenav-position-example.html new file mode 100644 index 000000000000..9d2c7280df01 --- /dev/null +++ b/src/material-examples/sidenav-position/sidenav-position-example.html @@ -0,0 +1,7 @@ + + Start content + End content + Implicit main content + + +
Please open in Plunker to see result
diff --git a/src/material-examples/sidenav-position/sidenav-position-example.ts b/src/material-examples/sidenav-position/sidenav-position-example.ts new file mode 100644 index 000000000000..56d0373bb4db --- /dev/null +++ b/src/material-examples/sidenav-position/sidenav-position-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** @title Implicit main content with two sidenavs */ +@Component({ + selector: 'sidenav-position-example', + templateUrl: 'sidenav-position-example.html', + styleUrls: ['sidenav-position-example.css'], +}) +export class SidenavPositionExample { + shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host)); +} diff --git a/src/material-examples/sidenav-responsive/sidenav-responsive-example.css b/src/material-examples/sidenav-responsive/sidenav-responsive-example.css new file mode 100644 index 000000000000..93a8e0114727 --- /dev/null +++ b/src/material-examples/sidenav-responsive/sidenav-responsive-example.css @@ -0,0 +1,31 @@ +.example-container { + display: flex; + flex-direction: column; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +.example-is-mobile .example-toolbar { + position: fixed; + /* Make sure the toolbar will stay on top of the content as it scrolls past. */ + z-index: 2; +} + +h1.example-app-name { + margin-left: 8px; +} + +.example-sidenav-container { + /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This + causes `` to act as our scrolling element for desktop layouts. */ + flex: 1; +} + +.example-is-mobile .example-sidenav-container { + /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the + `` to be our scrolling element for mobile layouts. */ + flex: 1 0 auto; +} diff --git a/src/material-examples/sidenav-responsive/sidenav-responsive-example.html b/src/material-examples/sidenav-responsive/sidenav-responsive-example.html new file mode 100644 index 000000000000..13df09bead06 --- /dev/null +++ b/src/material-examples/sidenav-responsive/sidenav-responsive-example.html @@ -0,0 +1,22 @@ +
+ + +

Responsive App

+ + + + + + {{nav}} + + + + +

{{content}}

+ + +
+ +
Please open in Plunker to see result
diff --git a/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts b/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts new file mode 100644 index 000000000000..964e3d051d36 --- /dev/null +++ b/src/material-examples/sidenav-responsive/sidenav-responsive-example.ts @@ -0,0 +1,35 @@ +import {MediaMatcher} from '@angular/cdk/layout'; +import {ChangeDetectorRef, Component} from '@angular/core'; + +/** @title Responsive sidenav */ +@Component({ + selector: 'sidenav-responsive-example', + templateUrl: 'sidenav-responsive-example.html', + styleUrls: ['sidenav-responsive-example.css'], +}) +export class SidenavResponsiveExample { + mobileQuery: MediaQueryList; + + fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`); + + fillerContent = Array(50).fill(0).map(() => + `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`); + + private _mobileQueryListener: () => void; + + constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) { + this.mobileQuery = media.matchMedia('(max-width: 600px)'); + this._mobileQueryListener = () => changeDetectorRef.detectChanges(); + this.mobileQuery.addListener(this._mobileQueryListener); + } + + ngOnDestroy(): void { + this.mobileQuery.removeListener(this._mobileQueryListener); + } + + shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host)); +}