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

更新历史
对于 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-not-flexLayout_500p.gif

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

为了实现这一点,我们将与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。

layout-adaptive-breakpoints-01.png

根据显示屏尺寸进行命名(例如,设定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组件。此外,它还长了两条腿…非常抱歉。

完成的东西

angular-flexLayout_500p.gif

总结

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

请提供相关链接。

    • Layout Responsive UI – Magerial Design

 

    • angular

 

    • Angular Material

 

    • flex-layout Responsive API – angular/flex-layout

 

    • 作成したソースコード – Github

作ったサイト (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日)更改日志。