使用Angular Material来实现响应式的材料设计列表

2 年 ago

文, 翔

2 minutes

更新历史
对于 2018.04.05 – 5.0.0-beta.13 (2018-02-22) 的BREAKING CHANGES进行了兼容处理。

截止到2017年10月6日，Angular Material(material2)仍然是一个 beta 版本，但在创建响应式的且具有材质设计风格的 SPA 时，它不仅提供了详细的文档，而且能够轻松实现美观的效果，非常棒。

这次我们使用了Angular Material的网格列表和angular的弹性布局来构建响应式设计。

环境

@angular版本为4.4.3。
@angular/material版本为2.0.0-beta.11。
@angular/flex-layout版本为2.0.0-beta.9。

简洁的网格设计

如果直接使用Angular Material提供的网格列表，它会根据宽度自动调整显示区域的大小。

即使保持现状，也可以根据用户的环境进行渲染。但这次我想要实现的是要求根据显示区域增加内容的显示数量。

为了实现这一点，我们将与Angular的flex-layout结合使用。

与FlexLayout结合使用

使用方法在这里。

flex-layout的安装

要使angular项目能够使用，需要通过命令“$ npm -i @angular/flex-layout –save”进行安装，并在app.module.ts文件中进行导入。

app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';
..
  imports: [
    FlexLayoutModule,

断点

为了通过flex-layout实现这次想要做的事情，需要了解Breakpoints。

根据显示屏尺寸进行命名（例如，设定600px – 959px为sm），并且可以为每个命名选择不同的显示方式。

MediaQueries and Aliases

breakpointmediaQueryxs’screen and (max-width: 599px)’sm’screen and (min-width: 600px) and (max-width: 959px)’md’screen and (min-width: 960px) and (max-width: 1279px)’lg’screen and (min-width: 1280px) and (max-width: 1919px)’xl’screen and (min-width: 1920px) and (max-width: 5000px)’

使用弹性布局

本次将根据显示宽度自动换行和显示多个元素。在这种情况下，使用fxLayoutWrap。

fxLayoutWrap在2018年2月22日的5.0.0-beta13版本中被弃用。截至2018年4月，我们在此页面以下提供了新的代码示例。

在 Flexbox 容器中，定义子项是在一行还是多行显示。

子アイテムがフレックスボックスコンテナ内の1行または複数行に表示されるかどうかを定義します。

一个简单的使用示例：

<div fxLayoutWrap>
  <div fxFlex="25" fxFlex.sm="33.3" fxFlex.xs="50">
    <p>1st</p>
    <p>2nd</p>
    <p>3rd</p>
  </div>
</div>

fxFlex=”xx” 用于设置相对于100的比例。该值可以用整数、%或px单位来指定。在这个例子中，设置为默认值为25（相当于全宽的1/4），当宽度小于959px时为33.3（相当于全宽的1/3），当宽度小于599px时为50（相当于全宽的1/2）。

将网格列表(Grid List)组合在一起

由于该变动后内容的尺寸不会改变，因此我们将应用Grid List。

因为想要借用Grid List的样式，我们将其实现为一个只有一个内容的列表。由于它与原本的用法有些偏差，我们不建议这样使用。

在这种情况下，您需要指定。（列数为1，纵横比为1:1）

<div fxLayoutWrap>
  <div fxFlex="25" fxFlex.sm="33.3" fxFlex.xs="50" *ngFor="let card of cards">
    <mat-grid-list cols="1" rowHeight="1:1">
      <mat-grid-tile>
        <mat-card>
          <img mat-card-image src="foo.jpg" alt="{{card.name}}'s latest card img.'">
        </mat-card>
        <mat-grid-tile-footer style="margin-bottom:48px;">
          <div class="name">{{card.name}}</div>
        </mat-grid-tile-footer>
        <mat-grid-tile-footer>
          <div class="kana">{{card.kana}}</div>
        </mat-grid-tile-footer>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
</div>

在上面的例子中，还同时使用了Card组件。此外，它还长了两条腿…非常抱歉。

完成的东西

总结

我已经通过使用flex-layout和Angular Material的组合创建了一个响应式的内容页面。由于Angular仍然提供了很多有用的API，所以我希望通过练习不断地使用它们并逐渐记住它们。

请提供相关链接。

作ったサイト (2017/10/06 時点でこのデザインを適用中)

追加说明 2018年04月05日

5.0.0-beta.13 (2018-02-22) 版本中 fxLayoutWrap 已经被废弃，因此需要进行以下修正。

之前

<div  fxLayout="row" fxLayoutWrap="wrap"> ... </div>

之后

<div  fxLayout="row wrap"> ... </div>

5.0.0-beta.13（2018年2月22日）更改日志。