@ngry/layouts NPM

Angular layouts

Project provides Angular layout components such as stack, layers, viewport, media, stage and panel.

Install

NPM:

npm i @ngry/layouts

Yarn:

yarn add @ngry/layouts

Layers layout

Represents ordered set of overlays.

Consists of the following components:

<l-layers> component represents container for one or more <l-layer> components
<l-layer> components fill the parent and behaves as ordered overlays

Usage

Import LayersLayoutModule into your app

import {NgModule} from '@angular/core';
import {LayersLayoutModule} from '@ngry/layouts';

@NgModule({
  imports: [
    LayersLayoutModule
  ]
})
export class AppModule { 
}

Use layers layout components in your templates

<l-layers>
  <l-layer>
    Background layer
  </l-layer>
  <l-layer>
    Middle layer
  </l-layer>
  <l-layer>
    Front layer
  </l-layer>
</l-layers>

Example

Visit layers layout demo page

Media layout

Represents row which usually contains some multimedia content, it's details and action triggers.

Consist of following components:

<l-media> represents container for one or more <l-media-content>, <l-media-details> and <l-media-action> components
<l-media-content> represents container for multimedia content, takes minimum required space
<l-media-action> represents container for action trigger element, takes minimum required space
<l-media-details> represents container for content description and related details

Usage

Import MediaLayoutModule into your app

import {NgModule} from '@angular/core';
import {MediaLayoutModule} from '@ngry/layouts';

@NgModule({
  imports: [
    MediaLayoutModule
  ]
})
export class AppModule { 
}

Use media layout components in your templates

<l-media>
  <l-media-content>
    <img src="poster.jpg" alt="Poster">
  </l-media-content>
  <l-media-details>
    <p>Movie Title</p>
    <dl>
      <dt>Budget:</dt> <dd>$100 000 000</dd>
      <dt>Actors</dt> <dd>...</dd>
    </dl>
  </l-media-details>
  <l-media-action>
    <a href="/movie/123/buy">Buy Now</a>
  </l-media-action>
</l-media>