Responsive API (original) (raw)
Responsive layouts in material design adapt to any possible screen size. Google's Material Design specifications provide guidance that includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.
Enhancing the Static API
Developers should consult the angular/flex-layout HTML Declarative API for specific Static API details, then simply extend the HTML markup usages by adding the responsive suffixes (as discussed below)!
@angular/flex-layout will automatically handle all the details listening for mediaQuery activations and applying the responsive values to the hosting DOM elements.
Responsive Features
To extend the @angular/flex-layout static API with responsive features, we will first associate specific breakpoint aliases with mediaQuery values.
MediaQueries and Aliases
We can associate breakpoints with mediaQuery definitions using breakpoint alias(es):
| breakpoint | mediaQuery |
|---|---|
| xs | '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)' |
| lt-sm | 'screen and (max-width: 599px)' |
| lt-md | 'screen and (max-width: 959px)' |
| lt-lg | 'screen and (max-width: 1279px)' |
| lt-xl | 'screen and (max-width: 1919px)' |
| gt-xs | 'screen and (min-width: 600px)' |
| gt-sm | 'screen and (min-width: 960px)' |
| gt-md | 'screen and (min-width: 1280px)' |
| gt-lg | 'screen and (min-width: 1920px)' |
If we combine the breakpoint alias with the Static Flex-Layout API, we can easily support Responsive breakpoints using a simple markup convention:
The alias is used as suffix extensions to the static API HTML markup!
<api
.<breakpoint alias ="<value " [<api .]=""</api </value </breakpoint </api
Below is an example usage of the Responsive Layout API:
In the markup above the HTML API directives use both static values and expression bindings; where the values are expressed as raw, percentage, or pixel values.
Note: numerica values not explicitly annotated as
px,vw, orvhdefault to percentage values.
Breakpoint Activation Fallback Algorithm
When a breakpoint is activated and the hosting element does NOT have a responsive API defined for the newly activated breakpoint, the Flex-Layout responsive engine uses a fallback, descending-scan algorithm to determine the replacement activation value.
This algorithm searches:
- For non-overlapping breakpoints: the search scans from largest-to-small breakpoint range to find the closest, matching activation value.
- (
xl,lg,md,sm,xs)
- (
- For overlapping breakpoints: the search scans from smallest-to-largest breakpoint range to find the closest, matching activation value.
- (
gt-lg,gt-md,gt-sm,gt-xs); wheregt-xsis the largest range. - (
lt-xl,lt-lg,lt-md,lt-sm); wherelt-xlis the largest range
- (
Consider the following responsive markup examples:
Example #1
When the activated breakpoint is:
xl, then fallback to the default fxShow; so the div is shownlg, then the div is hidden (since the value === 'true')md, then fallback to the default fxShow; so the div is shownsm, then fallback to the default fxShow; so the div is shownxs, then the div is shown (since the value === 'false')
Example #2
When the activated breakpoint is:
xl, then fallback to 'gt-sm' so the div sizing is 100%lg, then fallback to 'gt-sm' so the div sizing is 100%md, then fallback to 'gt-sm' so the div sizing is 100%sm, then fallback to the default fxFlex="50%"; so the div sizing is 50%xs, then fallback to the default fxFlex="50%"; so the div sizing is 50%