Skip to content

Commit 453f883

Browse files
hanslhansl
committed
component(): sidenav component.
1 parent bc6d2bc commit 453f883

File tree

13 files changed

+606
-8
lines changed

13 files changed

+606
-8
lines changed

‎src/components/sidenav/README.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# MdSidenav
2+
3+
MdSidenav is the side navigation component for Material 2. It is composed of two components; `<md-sidenav-layout>` and `<md-sidenav>`.
4+
5+
## `<md-sidenav-layout>`
6+
7+
The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop.
8+
9+
### Properties
10+
11+
| Name | Description |
12+
| --- | --- |
13+
| `start` | The start aligned `MdSidenav` instance, or `null` if none is specified. In LTR direction, this is the sidenav shown on the left side. In RTL direction, it will show on the right. |
14+
| `end` | The end aligned `MdSidenav` instance, or `null` if none is specified. This is the sidenav opposing the `start` sidenav. |
15+
16+
## `<md-sidenav>`
17+
18+
The sidenav panel.
19+
20+
### Inputs
21+
22+
| Name | Type | Description |
23+
| --- | --- | --- |
24+
| `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. |
25+
| `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 `<md-sidenav-layout>` 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"`. |
26+
| `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. |
27+
28+
### Outputs
29+
30+
| Name | Description |
31+
| --- | --- |
32+
| `open-start` | Emitted when the sidenav is starting opening. This should only be used to coordinate animations. |
33+
| `close-start` | Emitted when the sidenav is starting closing. This should only be used to coordinate animations. |
34+
| `open` | Emitted when the sidenav is done opening. Use this for, e.g., setting focus on controls or updating state. |
35+
| `close` | Emitted when the sidenav is done closing. |
36+
37+
### Methods
38+
39+
| Signature | Description |
40+
| --- | --- |
41+
| `open(): Promise<void>` | 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. |
42+
| `close(): Promise<void>` | 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. |
43+
| `toggle(): Promise<void>` | 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. |
44+
45+
## Examples
46+
47+
Here's a simple example of using the sidenav:
48+
49+
```HTML
50+
<app>
51+
<md-sidenav-layout>
52+
<md-sidenav #start (open)="mybutton.focus()">
53+
Start Sidenav.
54+
<br>
55+
<md-button #mybutton (click)="start.close()">Close</button>
56+
</md-sidenav>
57+
<md-sidenav #end align="end">
58+
End Sidenav.
59+
<md-button (click)="end.close()">Close</button>
60+
</md-sidenav>
61+
62+
My regular content. This will be moved into the proper DOM at runtime.
63+
</md-sidenav-layout>
64+
</app>
65+
```
66+

‎src/components/sidenav/sidenav.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="md-sidenav-backdrop"
2+
(click)="(start_?.mode == 'side' || start_.close())
3+
&& (end_?.mode == 'side' || end_.close())"
4+
[class.md-sidenav-shown]="(start_?.mode != 'side' && start_.opened)
5+
|| (end_?.mode != 'side' && end_.opened)"></div>
6+
7+
<ng-content select="md-sidenav"></ng-content>
8+
9+
<md-content [style.margin-left.px]="(left_?.mode == 'side' && left_.opened) ? left_.width_ : 0"
10+
[style.margin-right.px]="(right_?.mode == 'side' && right_.opened) ? right_.width_ : 0"
11+
[style.left.px]="(left_?.mode == 'push' && left_.opened) ? left_.width_ : 0"
12+
[style.right.px]="(right_?.mode == 'push' && right_.opened) ? right_.width_ : 0">
13+
<ng-content></ng-content>
14+
</md-content>

‎src/components/sidenav/sidenav.scss‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
@import "default-theme";
2+
@import "variables";
3+
@import "shadows";
4+
5+
6+
$md-sidenav-background-color: md-color($md-background, 100) !default;
7+
$md-sidenav-push-background-color: md-color($md-background, 100) !default;
8+
9+
10+
/** Mixin to help with defining LTR/RTL `transform: translateX()` values. */
11+
@mixin md-sidenav-transition($open, $close) {
12+
transform: translateX($close);
13+
14+
&.md-sidenav-closed {
15+
visibility: hidden;
16+
}
17+
&.md-sidenav-closing {
18+
transform: translateX($close);
19+
will-change: transform;
20+
}
21+
&.md-sidenav-opening {
22+
visibility: visible;
23+
transform: translateX($open);
24+
will-change: transform;
25+
box-shadow: $md-shadow-bottom-z-1;
26+
}
27+
&.md-sidenav-opened {
28+
transform: translateX($open);
29+
box-shadow: $md-shadow-bottom-z-1;
30+
}
31+
}
32+
33+
34+
:host {
35+
position: relative;
36+
display: block;
37+
// Use a transform to create a new stacking context.
38+
transform: translate3D(0, 0, 0);
39+
overflow-x: hidden;
40+
41+
transition: margin-left $swift-ease-out-duration $swift-ease-out-timing-function,
42+
margin-right $swift-ease-out-duration $swift-ease-out-timing-function;
43+
44+
& > .md-sidenav-backdrop {
45+
position: absolute;
46+
top: 0;
47+
left: 0;
48+
right: 0;
49+
bottom: 0;
50+
z-index: $z-index-drawer;
51+
visibility: hidden;
52+
display: block;
53+
54+
&.md-sidenav-shown {
55+
visibility: visible;
56+
background-color: rgba(0, 0, 0, 0.21);
57+
transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
58+
}
59+
}
60+
61+
& > md-content {
62+
display: block;
63+
position: relative;
64+
transition: margin-left $swift-ease-out-duration $swift-ease-out-timing-function,
65+
margin-right $swift-ease-out-duration $swift-ease-out-timing-function,
66+
left $swift-ease-out-duration $swift-ease-out-timing-function,
67+
right $swift-ease-out-duration $swift-ease-out-timing-function;
68+
}
69+
70+
> md-sidenav {
71+
position: fixed;
72+
top: 0;
73+
bottom: 0;
74+
z-index: $z-index-drawer + 1;
75+
background-color: $md-sidenav-background-color;
76+
77+
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
78+
79+
@include md-sidenav-transition(0, -100%);
80+
81+
&.md-sidenav-push {
82+
background-color: $md-sidenav-push-background-color;
83+
}
84+
85+
&.md-sidenav-side {
86+
z-index: $z-index-drawer - 1;
87+
}
88+
89+
&.md-sidenav-end {
90+
right: 0;
91+
92+
@include md-sidenav-transition(0, 100%);
93+
}
94+
}
95+
}
96+
97+
98+
:host-context([dir="rtl"]) {
99+
> md-sidenav {
100+
@include md-sidenav-transition(0, 100%);
101+
102+
&.md-sidenav-end {
103+
left: 0;
104+
right: auto;
105+
106+
@include md-sidenav-transition(0, -100%);
107+
}
108+
}
109+
}

0 commit comments

Comments
 (0)