Angular Flex Layout 进阶

Photo by Shaah Shahidh on Unsplash

大多数情况下,我们往往希望自己的页面是响应式的。

Angular Flex Layout 也提供了 Responsive API 帮助我们进行响应式布局。

只需在 Static API 后加上 breakpoint 后缀就可以,例如

<div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div>
<div fxFlex="50%" fxFlex.gt-sm="100%"> ... </div>

和其他响应式 API 一样,这样就会引入一个所谓的 Fallback 策略的问题。

Fallback 策略

Angualr Flex Layout Fallback 策略,总结起来就是:

范围越小的 breakpoint 拥有越高的优先权。

non-overlapping

non-overlapping 是指 breakpoints 之间没有交叉。

回看一下上面的例子:

<div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div>

假如当前浏览器尺寸为 xl,但是由于这里只给出了 xs、lg 的处理,

那么这个元素就会回落到 fxShow 的指令上。

假如当前浏览器尺寸为 lg,那么这个元素就会回落到 fxHide.lg=”true” 上。

overlapping breakpoints

overlapping 是 breakpoints 之间作用范围有交叉。

回看一下上面的例子:

<div fxFlex="50%" fxFlex.gt-xs="33%" fxFlex.gt-sm="50%"> ... </div>

假如当前浏览器尺寸为 xl,xl 既在 gt-xs 和 又在 gt-sm 的范围内

但是由于 gt-sm 和 gt-xs 的相比,范围更小,因此 xl 会落在 gt-xs 中,

此时 fxFlex = 50%

例子

利用 Responsive API 实现的一个例子

<div  fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-around center">
  <falcon-overview fxFlex="100" fxFlex.gt-sm="33"></falcon-overview>
  <falcon-overview fxFlex="100" fxFlex.gt-sm="33"></falcon-overview>
  <falcon-overview fxFlex="100" fxFlex.gt-sm="33"></falcon-overview>
</div>

在大于 sm 的尺寸下,三个 mat-card 水平排列(row)。

在小于 sm 的尺寸下,三个 mat-card 垂直排列(column) 。

参考链接

Responsive API

相关阅读

Angular Flex Layout 入门

发表评论

电子邮件地址不会被公开。 必填项已用*标注