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

File

src/app/materials/cards/cards.component.ts

Implements

OnInit

Metadata

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

Index

Methods

Constructor

constructor()
Defined in src/app/materials/cards/cards.component.ts:8

Methods

ngOnInit
ngOnInit()
Defined in src/app/materials/cards/cards.component.ts:12
Returns : void 
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-cards',
  templateUrl: './cards.component.html',
  styleUrls: ['./cards.component.scss']
})
export class CardsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
Copy
<mat-card>Simple card</mat-card>

<mat-card>
  <mat-card-title>mat-card-title</mat-card-title>
  <mat-card-subtitle>mat-card-subtitle</mat-card-subtitle>
  <mat-card-content>
    mat-card-conten
  </mat-card-content>
  <mat-card-actions>
    mat-card-actions
  </mat-card-actions>
  <mat-card-footer>mat-card-footer</mat-card-footer>
</mat-card>

<mat-card>
  <mat-card-title>Angular 6 正式发布</mat-card-title>
  <mat-card-subtitle>统一框架、Material 和 CLI 三大模块</mat-card-subtitle>
  <mat-card-content>
    <p>
      Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material 和 CLI 三大 Angular 组件的第一个版本，此次没有将重点放在底层框架，而是更多地关注于工具链上，以使其具有更好的可移植性。</p>
  </mat-card-content>
  <mat-card-actions align="end">
    <button mat-icon-button>
      <mat-icon>favorite</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>share</mat-icon>
    </button>
  </mat-card-actions>
</mat-card>

<mat-card>
  <mat-card-title>Angular 4.0.0 正式版发布</mat-card-title>
  <mat-card-subtitle>Angular 4.0.0 正式版发布；Google Chrome 悄悄升级 WebGL 2.0 标准</mat-card-subtitle>
  <mat-card-content>
    <p>经历了 6 个 RC 版本之后，Angular 项目组终于发布了正式版 Angular 4.0.0。值得关注的点有：</p>
    <p>速度更快、体积更小：除了速度更快、体积更小，该版本还对内置指令 NgFor 和 NgIf 以及模板的 source map 等功能进行了优化</p>
    <p>向后兼容：该版本向后兼容大多数应用中的 2.x.x 系列</p>
    <p>强力优化代码：新版优化了 View 引擎，改进后 AoT 生成的代码将减少约 60%，而且模板越复杂，所优化的代码量就越大</p>
    <p>动画部分单独打包：Angular 将动画部分从 @angular/core 拆分出来，单独打包。将核心模块精简后，在不使用动画时产品中将不包含冗余的动画代码。如需要动画，可使用相关功能自行导入</p>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>什么是PWA</mat-card-title>
  <mat-card-content>
    <p>PWA（Progressive Web App）利用TLS，webapp manifests和service workers使应用程序能够安装并离线使用。 换句话说，PWA就像手机上的原生应用程序，但它是使用诸如HTML5，JavaScript和CSS3之类的网络技术构建的。
      如果构建正确，PWA与原生应用程序无法区分。
    </p>
    <p>PWA 的主要特点包括下面三点：</p>
    <p>可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现</p>
    <p>体验 - 快速响应，并且有平滑的动画响应用户的操作</p>
    <p>粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面</p>
    <p>PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现有的特征。</p>
  </mat-card-content>
</mat-card>
Copy

./cards.component.scss 

mat-card {
  margin: 24px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""