angular-material-app documentation
  1. Components
  2. NavigationComponent

File

src/app/navigation/navigation.component.ts

Implements

OnInit

Metadata

selector app-navigation
styleUrls ./navigation.component.scss
templateUrl ./navigation.component.html

Index

Properties
Methods

Constructor

constructor(service, dialog: MatDialog)
Defined in src/app/navigation/navigation.component.ts:15
Parameters :
Name Type Optional
service No
dialog MatDialog No

Methods

editorItem
editorItem(item)
Defined in src/app/navigation/navigation.component.ts:47
Parameters :
Name Optional
item No
Returns : void
getCategories
getCategories()
Defined in src/app/navigation/navigation.component.ts:27
Returns : void
getNavigations
getNavigations()
Defined in src/app/navigation/navigation.component.ts:31
Returns : void
hideLoading
hideLoading()
Defined in src/app/navigation/navigation.component.ts:36
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/navigation/navigation.component.ts:22
Returns : void
selectedTagChange
selectedTagChange(tag)
Defined in src/app/navigation/navigation.component.ts:45
Parameters :
Name Optional
tag No
Returns : void
showLoading
showLoading()
Defined in src/app/navigation/navigation.component.ts:41
Returns : void

Properties

categories
Type : object
Defined in src/app/navigation/navigation.component.ts:11
currentNum
Default value : new Array(20)
Defined in src/app/navigation/navigation.component.ts:15
lists
Defined in src/app/navigation/navigation.component.ts:12
 
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'
    });
  }
}
Copy
<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>
Copy

./navigation.component.scss 

@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);
    }
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""