Implementation

Joey Perrott edited this page Feb 22, 2018 · 7 revisions

The Angular architecture for Layouts eliminates all external Flexbox stylesheets and SCSS files formerly used in the AngularJS Material Layout implementations.

This is pure TypeScript, Angular Layout engine that is independent of Angular Material... yet can be used easily within any Angular Material application.

The Layout API directives are used to create DOM element style injectors which inject specific, custom Flexbox CSS directly as inline styles onto the DOM element.

For example, consider the use of the fxLayout="row" and fxLayoutAlign="center center" directives.

Static Markup:

<div [fxLayout]="direction" fxLayoutAlign="center center">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

is transformed (at runtime) with inline, injected styles:

<div fxLayout="row" fxLayoutAlign="center center"
      style="display: flex; flex-direction: row; max-width: 100%; 
             box-sizing: border-box; justify-content: center; 
             align-content: center; align-items: center;">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

Developers should consult the API Documentation for more details.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.