File
Implements
Metadata
| selector |
app-navigation |
| styleUrls |
./navigation.component.scss |
| templateUrl |
./navigation.component.html |
Constructor
constructor(service, dialog: MatDialog)
|
|
|
Parameters :
| Name |
Type |
Optional |
| service |
|
No
|
| dialog |
MatDialog
|
No
|
|
Methods
|
editorItem
|
editorItem(item)
|
|
|
|
|
|
getCategories
|
getCategories()
|
|
|
|
|
|
getNavigations
|
getNavigations()
|
|
|
|
|
|
hideLoading
|
hideLoading()
|
|
|
|
|
|
selectedTagChange
|
selectedTagChange(tag)
|
|
|
|
|
|
showLoading
|
showLoading()
|
|
|
|
|
|
currentNum
|
Default value : new Array(20)
|
|
|
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ActionComponent } from './action/action.component';
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit {
categories: object;
lists;
// skeleton screen
currentNum = new Array(20);
constructor(
@Inject('NavigationService') private service,
private dialog: MatDialog
) {}
ngOnInit() {
this.getCategories();
this.getNavigations();
}
getCategories() {
this.categories = this.service.selectCategories();
}
getNavigations() {
this.lists = this.service.select();
this.hideLoading();
}
hideLoading() {
// 延时显示效果
setTimeout(() => (this.currentNum = new Array(0)), 1000);
}
showLoading() {
this.currentNum = new Array(20);
}
selectedTagChange(tag) {}
editorItem(item) {
const dialogRef = this.dialog.open(ActionComponent, {
data: item,
width: '600px'
});
}
}
<mat-toolbar class="mat-elevation-z2 m-b-20 stbui-background-blue">
<stbui-brand class="stbui-background-blue" style="margin-left:-16px;"></stbui-brand>
</mat-toolbar>
<stbui-search placeholder="搜索..." class="m-l-10 m-r-10 mat-elevation-z2"></stbui-search>
<div fxLayout="column">
<mat-card>
<mat-card-content>
<stbui-tag-select [tags]="categories" (selectedTagChange)="selectedTagChange($event)"></stbui-tag-select>
</mat-card-content>
</mat-card>
</div>
<div fxLayout="row wrap">
<div fxFlex="100" fxFlex.gt-md="20" fxFlex.gt-sm="33.3" fxFlex.gt-xs="50" *ngFor="let navigation of currentNum">
<stbui-loading-skeleton></stbui-loading-skeleton>
</div>
<div fxFlex="100" fxFlex.gt-md="20" fxFlex.gt-sm="33.3" fxFlex.gt-xs="50" *ngFor="let list of lists">
<mat-card class="nav-item">
<div class="nav-item-mask">
<div class="nav-item-logo" [ngStyle]="{'background-image': list.image_link}"></div>
</div>
<mat-card-header>
<mat-card-title class="nav-title">
<a href="{{ list.link }}" target="blank">{{ list.title }}</a>
</mat-card-title>
<mat-card-subtitle class="nav-desc">{{ list.description }}</mat-card-subtitle>
</mat-card-header>
</mat-card>
</div>
</div>
@import '~@angular/material/_theming';
mat-card {
margin: 10px;
}
.nav-title {
a {
font-size: 16px;
text-decoration: none;
}
}
.nav-desc {
max-height: 100px;
overflow: hidden;
}
.nav-item {
height: 280px;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: default;
&:hover {
transform: translate(0, -8px);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.16);
}
&-mask {
position: relative;
height: 144px;
width: calc(100% + 32px);
top: -16px;
left: -16px;
border-radius: 4px 4px 0 0;
background: #1956ef;
background: linear-gradient(90deg, #1956ef, #30a0f8);
}
&-logo {
height: 144px;
width: 56%;
margin: 0 22%;
text-align: center;
background: {
repeat: no-repeat;
size: contain;
position: center;
image: url(/assets/logo.png);
}
}
}
Legend
Html element with directive