Skip to content

Commit bd8cfef

Browse files
hanslhansl
committed
component(): sidenav component.
1 parent d823bf2 commit bd8cfef

File tree

19 files changed

+1136
-72
lines changed

19 files changed

+1136
-72
lines changed

‎src/components/button/button.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ $md-fab-mini-line-height: rem(4.00) !default;
8989
// Use a CSS class for focus style because we only want to render the focus style when
9090
// the focus originated from a keyboard event (see JS source for more details).
9191
&:hover, &.md-button-focus {
92-
background: md-color($md-background, 500, 0.2);
92+
background: md-color($md-background, background, 0.2);
9393
}
9494

9595
&.md-primary {
@@ -157,8 +157,8 @@ $md-fab-mini-line-height: rem(4.00) !default;
157157
[md-raised-button] {
158158
@include md-raised-button();
159159

160-
color: md-color($md-background, default-contrast);
161-
background-color: md-color($md-background, 50);
160+
color: md-color($md-foreground, text);
161+
background-color: md-color($md-background, background);
162162
}
163163

164164
[md-fab] {

‎src/components/card/card.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ md-card {
1515
border-radius: $md-card-border-radius;
1616
box-shadow: $md-shadow-bottom-z-1;
1717
font-family: $font-family;
18-
background: md-color($md-background, 50); // TODO(kara): use updated background palette
18+
background: md-color($md-background, card);
1919
}
2020

2121
md-card:hover {

‎src/components/sidenav/README.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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+
## Screenshots
6+
7+
<img src="https://material.angularjs.org/material2_assets/sidenav-example.png">
8+
9+
10+
## `<md-sidenav-layout>`
11+
12+
The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop.
13+
14+
### Properties
15+
16+
| Name | Description |
17+
| --- | --- |
18+
| `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. There can only be one sidenav on either side. |
19+
| `end` | The end aligned `MdSidenav` instance, or `null` if none is specified. This is the sidenav opposing the `start` sidenav. There can only be one sidenav on either side. |
20+
21+
## `<md-sidenav>`
22+
23+
The sidenav panel.
24+
25+
### Bound Properties
26+
27+
| Name | Type | Description |
28+
| --- | --- | --- |
29+
| `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. An exception will be thrown if there are more than 1 sidenav on either side. |
30+
| `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"`. |
31+
| `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. |
32+
33+
### Events
34+
35+
| Name | Description |
36+
| --- | --- |
37+
| `open-start` | Emitted when the sidenav is starting opening. This should only be used to coordinate animations. |
38+
| `close-start` | Emitted when the sidenav is starting closing. This should only be used to coordinate animations. |
39+
| `open` | Emitted when the sidenav is done opening. Use this for, e.g., setting focus on controls or updating state. |
40+
| `close` | Emitted when the sidenav is done closing. |
41+
42+
### Methods
43+
44+
| Signature | Description |
45+
| --- | --- |
46+
| `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. |
47+
| `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. |
48+
| `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. |
49+
50+
### Notes
51+
52+
The `<md-sidenav>` will resize based on its content. You can also set its width in CSS, like so:
53+
54+
```css
55+
md-sidenav {
56+
width: 200px;
57+
}
58+
```
59+
60+
Try to avoid percent based width as `resize` events are not (yet) supported.
61+
62+
## Examples
63+
64+
Here's a simple example of using the sidenav:
65+
66+
```html
67+
<app>
68+
<md-sidenav-layout>
69+
<md-sidenav #start (open)="mybutton.focus()">
70+
Start Sidenav.
71+
<br>
72+
<md-button #mybutton (click)="start.close()">Close</button>
73+
</md-sidenav>
74+
<md-sidenav #end align="end">
75+
End Sidenav.
76+
<md-button (click)="end.close()">Close</button>
77+
</md-sidenav>
78+
79+
My regular content. This will be moved into the proper DOM at runtime.
80+
</md-sidenav-layout>
81+
</app>
82+
```
83+

‎src/components/sidenav/sidenav.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="md-sidenav-backdrop" (click)="closeModalSidenav_()"
2+
[class.md-sidenav-shown]="isShowingBackdrop_()"></div>
3+
4+
<ng-content select="md-sidenav"></ng-content>
5+
6+
<md-content [style.margin-left.px]="getMarginLeft_()"
7+
[style.margin-right.px]="getMarginRight_()"
8+
[style.left.px]="getPositionLeft_()"
9+
[style.right.px]="getPositionRight_()">
10+
<ng-content></ng-content>
11+
</md-content>

‎src/components/sidenav/sidenav.scss

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
@import "default-theme";
2+
@import "mixins";
3+
@import "variables";
4+
@import "shadows";
5+
6+
7+
// We use invert() here to have the darken the background color expected to be used. If the
8+
// background is light, we use a dark backdrop. If the background is dark, we use a light backdrop.
9+
$md-sidenav-backdrop-color: invert(md-color($md-background, card, 0.6)) !default;
10+
$md-sidenav-background-color: md-color($md-background, dialog) !default;
11+
$md-sidenav-push-background-color: md-color($md-background, dialog) !default;
12+
13+
14+
/**
15+
* Mixin to help with defining LTR/RTL `transform: translateX()` values.
16+
* @param $open The translation value when the sidenav is opened.
17+
* @param $close The translation value when the sidenav is closed.
18+
*/
19+
@mixin md-sidenav-transition($open, $close) {
20+
transform: translateX($close);
21+
22+
&.md-sidenav-closed {
23+
// We use `visibility: hidden | visible` because `display: none` will not animate any
24+
// transitions, while visibility will interpolate transitions properly.
25+
// see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation
26+
// section.
27+
visibility: hidden;
28+
}
29+
&.md-sidenav-closing {
30+
transform: translateX($close);
31+
will-change: transform;
32+
}
33+
&.md-sidenav-opening {
34+
visibility: visible;
35+
transform: translateX($open);
36+
will-change: transform;
37+
box-shadow: $md-shadow-bottom-z-1;
38+
}
39+
&.md-sidenav-opened {
40+
transform: translateX($open);
41+
box-shadow: $md-shadow-bottom-z-1;
42+
}
43+
}
44+
45+
46+
:host {
47+
// We need a stacking context here so that the backdrop and drawers are clipped to the
48+
// MdSidenavLayout. This creates a new z-index stack so we use low numbered z-indices.
49+
// We create another stacking context in the `<md-content>` and in each sidenav so that
50+
// the application content does not get messed up with our own CSS.
51+
@include md-stacking-context();
52+
53+
box-sizing: border-box;
54+
55+
// Need this to take up space in the layout.
56+
display: block;
57+
58+
// Hide the sidenavs when they're closed.
59+
overflow-x: hidden;
60+
61+
transition: margin-left $swift-ease-out-duration $swift-ease-out-timing-function,
62+
margin-right $swift-ease-out-duration $swift-ease-out-timing-function;
63+
64+
& > .md-sidenav-backdrop {
65+
position: absolute;
66+
top: 0;
67+
left: 0;
68+
right: 0;
69+
bottom: 0;
70+
71+
display: block;
72+
73+
// Because of the new stacking context, the z-index stack is new and we can use our own
74+
// numbers.
75+
z-index: 2;
76+
77+
// We use `visibility: hidden | visible` because `display: none` will not animate any
78+
// transitions, while visibility will interpolate transitions properly.
79+
// see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, the Interpolation
80+
// section.
81+
visibility: hidden;
82+
83+
&.md-sidenav-shown {
84+
visibility: visible;
85+
background-color: $md-sidenav-backdrop-color;
86+
transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function;
87+
}
88+
}
89+
90+
& > md-content {
91+
@include md-stacking-context();
92+
93+
display: block;
94+
transition: margin-left $swift-ease-out-duration $swift-ease-out-timing-function,
95+
margin-right $swift-ease-out-duration $swift-ease-out-timing-function,
96+
left $swift-ease-out-duration $swift-ease-out-timing-function,
97+
right $swift-ease-out-duration $swift-ease-out-timing-function;
98+
}
99+
100+
> md-sidenav {
101+
@include md-stacking-context();
102+
103+
display: block;
104+
position: fixed;
105+
top: 0;
106+
bottom: 0;
107+
z-index: 3;
108+
109+
background-color: $md-sidenav-background-color;
110+
111+
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
112+
113+
@include md-sidenav-transition(0, -100%);
114+
115+
&.md-sidenav-push {
116+
background-color: $md-sidenav-push-background-color;
117+
}
118+
119+
&.md-sidenav-side {
120+
z-index: 1;
121+
}
122+
123+
&.md-sidenav-end {
124+
right: 0;
125+
126+
@include md-sidenav-transition(0, 100%);
127+
}
128+
}
129+
}
130+
131+
132+
:host-context([dir="rtl"]) {
133+
> md-sidenav {
134+
@include md-sidenav-transition(0, 100%);
135+
136+
&.md-sidenav-end {
137+
left: 0;
138+
right: auto;
139+
140+
@include md-sidenav-transition(0, -100%);
141+
}
142+
}
143+
}

0 commit comments

Comments
 (0)