From 538f2d9961d00594f47306814bce19023da2683c Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 12 Oct 2017 18:15:02 -0700 Subject: [PATCH] add examples --- src/lib/sidenav/README.md | 171 +----------------- src/lib/sidenav/sidenav.md | 54 ++++-- src/material-examples/example-module.ts | 62 ++++++- .../sidenav-disable-close-example.css | 7 + .../sidenav-disable-close-example.html | 13 ++ .../sidenav-disable-close-example.ts | 21 +++ .../sidenav-drawer-overview-example.css | 6 + .../sidenav-drawer-overview-example.html | 4 + .../sidenav-drawer-overview-example.ts | 9 + .../sidenav-fab/sidenav-fab-example.css | 26 --- .../sidenav-fab/sidenav-fab-example.html | 32 ---- .../sidenav-fab/sidenav-fab-example.ts | 13 -- .../sidenav-fixed/sidenav-fixed-example.css | 29 +++ .../sidenav-fixed/sidenav-fixed-example.html | 26 +++ .../sidenav-fixed/sidenav-fixed-example.ts | 22 +++ .../sidenav-mode/sidenav-mode-example.css | 14 ++ .../sidenav-mode/sidenav-mode-example.html | 27 +++ .../sidenav-mode/sidenav-mode-example.ts | 14 ++ .../sidenav-open-close-example.css | 14 ++ .../sidenav-open-close-example.html | 17 ++ .../sidenav-open-close-example.ts | 13 ++ .../sidenav-overview-example.css | 19 +- .../sidenav-overview-example.html | 16 +- .../sidenav-overview-example.ts | 8 +- .../sidenav-position-example.css | 7 + .../sidenav-position-example.html | 7 + .../sidenav-position-example.ts | 11 ++ .../sidenav-responsive-example.css | 31 ++++ .../sidenav-responsive-example.html | 22 +++ .../sidenav-responsive-example.ts | 35 ++++ 30 files changed, 454 insertions(+), 296 deletions(-) create mode 100644 src/material-examples/sidenav-disable-close/sidenav-disable-close-example.css create mode 100644 src/material-examples/sidenav-disable-close/sidenav-disable-close-example.html create mode 100644 src/material-examples/sidenav-disable-close/sidenav-disable-close-example.ts create mode 100644 src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.css create mode 100644 src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html create mode 100644 src/material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.ts delete mode 100644 src/material-examples/sidenav-fab/sidenav-fab-example.css delete mode 100644 src/material-examples/sidenav-fab/sidenav-fab-example.html delete mode 100644 src/material-examples/sidenav-fab/sidenav-fab-example.ts create mode 100644 src/material-examples/sidenav-fixed/sidenav-fixed-example.css create mode 100644 src/material-examples/sidenav-fixed/sidenav-fixed-example.html create mode 100644 src/material-examples/sidenav-fixed/sidenav-fixed-example.ts create mode 100644 src/material-examples/sidenav-mode/sidenav-mode-example.css create mode 100644 src/material-examples/sidenav-mode/sidenav-mode-example.html create mode 100644 src/material-examples/sidenav-mode/sidenav-mode-example.ts create mode 100644 src/material-examples/sidenav-open-close/sidenav-open-close-example.css create mode 100644 src/material-examples/sidenav-open-close/sidenav-open-close-example.html create mode 100644 src/material-examples/sidenav-open-close/sidenav-open-close-example.ts create mode 100644 src/material-examples/sidenav-position/sidenav-position-example.css create mode 100644 src/material-examples/sidenav-position/sidenav-position-example.html create mode 100644 src/material-examples/sidenav-position/sidenav-position-example.ts create mode 100644 src/material-examples/sidenav-responsive/sidenav-responsive-example.css create mode 100644 src/material-examples/sidenav-responsive/sidenav-responsive-example.html create mode 100644 src/material-examples/sidenav-responsive/sidenav-responsive-example.ts diff --git a/src/lib/sidenav/README.md b/src/lib/sidenav/README.md index 0acf7332acc8..d9e0e12aab51 100644 --- a/src/lib/sidenav/README.md +++ b/src/lib/sidenav/README.md @@ -1,170 +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 84a64ce24f86..788a28655dd5 100644 --- a/src/lib/sidenav/sidenav.md +++ b/src/lib/sidenav/sidenav.md @@ -7,14 +7,14 @@ use three components: `` which acts as a structural conta and sidenav, `` which represents the main content, and `` which represents the added side content. - + There are also drawer components, ``, ``, and ``, 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 @@ -32,7 +32,9 @@ 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. +of it. + + The following are examples of valid sidenav layouts: @@ -55,7 +57,7 @@ The following are examples of valid sidenav layouts: ``` -Anf these are examples of invalid sidenav layouts: +And these are examples of invalid sidenav layouts: ```html @@ -90,7 +92,7 @@ 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. @@ -100,13 +102,13 @@ The `` can render in one of three different ways based on the `mode | 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. | +| `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. | If no `mode` is specified, `over` is used by default. - + `` also supports all of these same modes. @@ -120,7 +122,7 @@ Custom handling for Esc can be done by adding a keydown listener to t Custom handling for backdrop clicks can be done via the `(backdropClick)` output property on ``. - + ### Setting the sidenav's size @@ -142,21 +144,35 @@ setting the `fixedInViewport` property. Additionally, top and bottom space can b `fixedTopGap` and `fixedBottomGap`. These properties accept a pixel value amount of space to add at the top or bottom. - + -### Common layout patterns +### Creating a responsive layout for mobile & desktop - +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. -#### Full-height sidenav -#### Sidenav under toolbar -#### Mobile sidenav -#### Responsive sidenav + ### 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 2add4934cdc6..e11c6c85b8e0 100644 --- a/src/material-examples/example-module.ts +++ b/src/material-examples/example-module.ts @@ -86,8 +86,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-vlaue-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'; @@ -514,7 +520,7 @@ export const EXAMPLE_COMPONENTS = { selectorName: null }, 'select-no-ripple': { - title: 'Select with cno option ripple ', + title: 'Select with no option ripple ', component: SelectNoRippleExample, additionalFiles: null, selectorName: null @@ -549,18 +555,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, @@ -763,8 +805,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..d256632bd66f --- /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..5039a87feb51 --- /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)); +}