src/app/cluster/cluster.component.ts
selector | hi-cluster |
styleUrls | ./cluster.component.scss |
templateUrl | ./cluster.component.html |
Properties |
Methods |
constructor(media: MediaObserver)
|
||||||
Defined in src/app/cluster/cluster.component.ts:12
|
||||||
Parameters :
|
ngOnInit |
ngOnInit()
|
Defined in src/app/cluster/cluster.component.ts:16
|
Returns :
void
|
toggleSidenav |
toggleSidenav()
|
Defined in src/app/cluster/cluster.component.ts:27
|
Returns :
void
|
isNarrowView |
Type : boolean
|
Defined in src/app/cluster/cluster.component.ts:12
|
sidenav |
Decorators :
@ViewChild('sidenav', {static: true})
|
Defined in src/app/cluster/cluster.component.ts:10
|
import { Component, OnInit, ViewChild } from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
@Component({
selector: 'hi-cluster',
templateUrl: './cluster.component.html',
styleUrls: ['./cluster.component.scss'],
})
export class ClusterComponent implements OnInit {
@ViewChild('sidenav', { static: true }) sidenav;
isNarrowView: boolean;
constructor(protected media: MediaObserver) {}
ngOnInit() {
// auto adjust side nav only if not embed
this.isNarrowView = this.media.isActive('xs') || this.media.isActive('sm');
this.media.asObservable().subscribe((change: MediaChange[]) => {
change.forEach((item) => {
this.isNarrowView = item.mqAlias === 'xs' || item.mqAlias === 'sm';
});
});
}
toggleSidenav() {
this.sidenav.opened ? this.sidenav.close() : this.sidenav.open();
}
}
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<mat-sidenav-container fxFill>
<mat-sidenav
#sidenav
[mode]="isNarrowView ? 'over' : 'side'"
[opened]="!isNarrowView"
[disableClose]="!isNarrowView"
class="mat-elevation-z4"
>
<hi-cluster-list></hi-cluster-list>
</mat-sidenav>
<section fxFill>
<router-outlet></router-outlet>
</section>
</mat-sidenav-container>
<button
mat-mini-fab
[ngClass]="['toggle-button', sidenav.opened ? 'open' : 'close']"
color=""
(click)="toggleSidenav()"
>
<mat-icon>chevron_{{ sidenav.opened ? 'left' : 'right' }}</mat-icon>
</button>
./cluster.component.scss
.mat-sidenav {
width: 25vw;
min-width: 200px;
}
.toggle-button {
position: fixed;
top: 50%;
z-index: 3;
transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
&.open {
left: calc(25vw - 20px);
}
&.close {
left: -15px;
}
}