Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
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.
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):
|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:
alias is used as suffix extensions to the static API HTML markup!
<api>.<breakpoint alias>="<value>" [<api>.<breakpoint alias>]="<expression>"
Below is an example usage of the Responsive Layout API:
<div fxLayout='column' class="zero"> <div fxFlex="33" [fxFlex.md]="box1Width" class="one" ></div> <div fxFlex="33" [fxLayout]="direction" fxLayout.md="row" class="two"> <div fxFlex="22" fxFlex.md="10px" fxHide.lg class="two_one"></div> <div fxFlex="205px" fxFlex.md="65" class="two_two"></div> <div fxFlex="30px" fxFlex.md="25" fxShow [fxHide.md]="hideBox" class="two_three"></div> </div> <div fxFlex class="three"></div> </div>
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
vhdefault 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.
- For overlapping breakpoints: the search scans from smallest-to-largest breakpoint range to find the closest, matching
gt-xsis the largest range.
lt-xlis the largest range
Consider the following responsive markup examples:
<div fxShow fxHide.xs="false" fxHide.lg="true"> ... </div>
When the activated breakpoint is:
xl, then fallback to the default fxShow; so the div is shown
lg, then the div is hidden (since the value === 'true')
md, then fallback to the default fxShow; so the div is shown
sm, then fallback to the default fxShow; so the div is shown
xs, then the div is shown (since the value === 'false')
<div fxFlex="50%" fxFlex.gt-sm="100%"> ... </div>
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%