Declarative API Overview

CaerusKaru edited this page Dec 14, 2018 · 36 revisions

Static API Overview

The Angular Layout features provide smart, syntactic directives to allow developers to easily and intuitively create responsive and adaptive layouts using Flexbox and CSS Grid.

The API outline here is considered static and provides a UX that will adjust element sizes and positions as the browser window width changes. The static API can be considered the default desktop layout API.

Developers should use the Responsive API to support alternate layout configurations for mobile or tablet devices

The Angular Layout API is an intuitive list of HTML directives (aka attributes) that can be used on HTML containers and elements. Instead of using traditional CSS stylesheets, developers will define their layouts declaratively directly in the HTML.

An important, fundamental concept is understanding which APIs are used on DOM containers versus APIs used on DOM child elements in those containers.

API for DOM containers:

HTML API Allowed values
fxLayout <direction> [wrap] row | column | row-reverse | column-reverse
fxLayoutAlign <main-axis> <cross-axis> main-axis: start | center | end | space-around | space-between | space-evenly; cross-axis: start | center | end | stretch | space-between | space-around | baseline
fxLayoutGap % | px | vw | vh
gdAlignColumns <main-axis> <cross-axis> main-axis: start | center | end | space-around | space-between | space-evenly | stretch; cross-axis: start | center | end | stretch
gdAlignRows <main-axis> <cross-axis> main-axis: start | center | end | space-around | space-between | space-evenly | stretch; cross-axis: start | center | end | stretch
gdAreas names separated by |, e.g. `gdAreas="area1 area2
gdAuto row | column | dense | row dense | column dense gdInline for inline-grid
gdColumns any valid input for grid-template-columns gdInline for inline-grid
! at the end means grid-auto-columns
gdRows any valid input grid-template-rows gdInline for inline-grid
! at the end means grid-auto-rows
gdGap % | px | vw | vh gdInline for inline-grid

These directives affect the flow and layout children elements in the container

API for DOM elements:

HTML Allowed values
fxFlex "" | px | % | vw | vh | <grow> <shrink> <basis>,
fxFlexOrder int
fxFlexOffset % | px | vw | vh
fxFlexAlign start | baseline | center | end
fxFlexFill, fxFill
gdArea string name for the area as defined in gdAreas
gdColumn any valid value for grid-column
gdRow any valid value for grid-row
gdGridAlign <row-axis> <cross-axis>

These directives affect the layout and size of the host element. Note the API expects their host elements to be inside a DOM container (a 'block' element which is itself using the Layout API for containers).

API for any element:

HTML API Allowed values
fxHide TRUE | FALSE | 0 | ""
fxShow TRUE | FALSE | 0 | ""
ngClass @extends ngClass core
ngStyle @extends ngStyle core
imgSrc @extends src attribute

Shown below is sample HTML markup that uses both the container and element Static API:

<div fxLayout='column' class="zero">

  <div fxFlex="33" class="one" ></div>
  <div fxFlex="33%" [fxLayout]="direction" class="two">

    <div fxFlex="22%"    class="two_one"></div>
    <div fxFlex="205px"  class="two_two"></div>
    <div fxFlex="30"     class="two_three"></div>

  </div>
  <div fxFlex class="three"></div>

</div>

Angular Layout directives assign CSS styles directly in-line to the host element. These in-line styles override inherited styles, ShadowDOM styles and even ShadowDOM tree stylings on the element :host

Responsive API

Angular Layout also has a huge set of responsive features that enable developers to easily change the UX layout configurations for different display devices. See the our documentation on the Responsive API page.

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.