Question

我已根据入门guide安装了Material Design，但在尝试复制Layout Containers API参考page底部的“响应布局”示例时，我注意到了一些问题：

布局属性显然在我的实现中无效（屏幕分辨率为1446x150）：

当我在index.html中指定时，显然没有使用Roboto字体。

我希望我错过了一些明显的东西，因为认为这样一个简单的例子不可复制会非常令人失望。

的index.html

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Personas</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  </head>
  <body>
    <app-root></app-root>
  </body>
  </html>

styles.css的

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

app.component.html

<div layout="row" layout-xs="column">
  <div flex>
    I'm above on mobile, and to the left on larger devices.
  </div>
  <div flex>
    I'm below on mobile, and to the right on larger devices.
  </div>
</div>

角

Angular CLI: 1.5.0
Node: 9.2.0
OS: darwin x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.2
@angular/cli: 1.5.0
@angular/material: 5.0.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.8.1

Answer 1

你在角度（2+）上使用了角度材质1语法，尽管它只与angularjs（1）兼容。我不认为那些是兼容的。

尝试安装material 2

Flex未完全集成到材质2中，它具有own separate github

但是现在你可以实现你在这里显示的内容using grid list 或者npm install @angular/flex-layout@latest --save，但语法可能与角度材料1不同。

如果你更喜欢前一种方法，那么这是一个取自角材料2的例子

comp.html中的

<mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile
    *ngFor="let tile of tiles"
    [colspan]="tile.cols"
    [rowspan]="tile.rows"
    [style.background]="tile.color">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

in comp.ts

  tiles = [
    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
  ];

为什么Material Design的布局不适用于Angular 4？

1 个答案: