Adaptive Layouts

Several Angular Material 1 applications: Material-Adaptive have been implemented using custom Flexbox CSS. These efforts illustrated the needs and features within a responsive, adaptive application.

• Pesto
• Shring

Different from responsive layouts where components change sizes and positions, the concepts of Adaptive layouts provide for UX where different components may be used for different breakpoints.

Animations can also be extended to support MediaQuery activations: different animations will run for different viewport sizes.

Developers can use the following directives to achieve some Adaptive UX goals:

• fx-hide
• fx-show
• ngIf

For examples of fx-hide usages in Adaptive layouts, please review the demo Show & Hide Directives:

• Demo
• Source

More examples will be presented and documented before the formal GM release.