@ngx-viz/flex-layout

This Angular Flex Layout Library provides a simple and flexible way to create responsive layouts in Angular applications.

Installation:

ng add @ngx-viz/flex-layout --project=<project-name>

or

npm install @ngx-viz/flex-layout --save

Configuration:

• Add @import "@ngx-viz/flex-layout/styles"; to your global styles.scss file (This gets automatically added when installing via ng-add command and specifying the project name).
• import { FlexLayoutModule} from '@ngx-viz/flex-layout';

Dependencies:

| @ngx-viz/flex-layout | Angular | | -------------------- | -------- | | 1.x.x | >=15.x.x |

Documentation

This library was developed to replicate the straightforward row and column usage found in the Ionic Framework using Angular Material's BreakpointObserver. Unlike Ionic, which is a comprehensive framework, this lightweight library offers a simpler solution for flex layout arrangements, including vertical and horizontal column arrangements. It's ideal for projects where installing Ionic might be overkill for such basic functionality.

Overview

This Angular Flex Layout Library provides a simple and flexible way to create responsive layouts in Angular applications. It includes components for defining rows and columns. Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using the input properties.

• Row take up the full width of their container
• Rows are horizontal groups of columns that line the columns up properly.
• Content should be placed within columns, and only columns may be immediate children of rows.
• The size property indicates the number of columns to use out of the default 12 per row. So, size="4" can be added to a column in order to take up 1/3 of the grid, or 4 of the 12 columns.
• Columns without a value for size will automatically have equal widths. For example, four columns will each automatically be 25% wide.
• Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element.
• There is padding at row container which can be overriden by addding a css class with no padding. There is no padding between individual columns.
• There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
• Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them (e.g., size-sm="4" applies to small, medium, large, and extra large devices).

Breakpoints and associated inputs

| Name | Value | Width Property | Offset Property | | ---- | ------ | -------------- | --------------- | | xs | 0 | size | offset | | sm | 576px | sizeSm | offsetSm | | md | 768px | sizeMd | offsetMd | | lg | 992px | sizeLg | offsetLg | | xl | 1200px | sizeXl | offsetXl |

Column Size

Basic Usage

<viz-row>
  <viz-col>col 1</viz-col>
  <viz-col>col 2</viz-col>
  <viz-col>col 3</viz-col>
</viz-row>

Default and specific column sizes

For all breakpoints, the below columns will take up the defined sizes 4 and 8 respectively

<viz-row>
  <viz-col [size]="4">col 1</viz-col>
  <viz-col [size]="8">col 2</viz-col>
</viz-row>

Responsive column sizes

It will be stacked for xs breakpoint, equal width for sm and up

<viz-row>
  <viz-col size="12" size-sm="3">
    col 1
  </viz-col>
  <viz-col size="12" size-sm="3">
    col 2
  </viz-col>
</viz-row>

Responsive column sizes

It will be stacked for xs breakpoint, equal width for sm and up

<viz-row>
  <viz-col size="12" size-sm="3">
    col 1
  </viz-col>
  <viz-col size="12" size-sm="3">
    col 2
  </viz-col>
</viz-row>

Column Offset

Columns can be offset to shift to the right by a certain number of columns out of the total number of columns.

Specific Offset

Columns can be moved to the right by using the offset property. This property increases the left margin of the column by the number of specified columns. It also shifts the columns to the right of it, if any exist.

<viz-row>
  <viz-col>col 1</viz-col>
  <viz-col offset="3">col 2</viz-col>
</viz-row>

Responsive Offset

The offset property will change the column's left margin for all breakpoints. Column also provides several offset properties with the breakpoint name appended to the end of "offset". These properties can be used to change the offset of the column based on the screen size.

<viz-row>
  <viz-col>col 1</viz-col>
  <viz-col offsetSm="3">col 2</viz-col>
</viz-row>

Alignment

Vertical Alignment

All columns can be vertically aligned inside of a row by adding different classes to the row.

<viz-row class="viz-align-items-start">
  <viz-col>col 1</viz-col>
  <viz-col>col 2</viz-col>
</viz-row>

<viz-row class="viz-align-items-center">
  <viz-col>col 1</viz-col>
  <viz-col>col 2</viz-col>
</viz-row>

<viz-row class="viz-align-items-end">
  <viz-col>col 1</viz-col>
  <viz-col>col 2</viz-col>
</viz-row>

Horizontal Alignment

All columns can be horizontally aligned inside of a row by adding different classes to the row.

<viz-row class="viz-justify-content-start">
  <viz-col>col 1</viz-col>
  <viz-col>col 2</viz-col>
</viz-row>

<viz-row class="viz-justify-content-center">
  <viz-col>col 1</viz-col>
  <viz-col>col 2</viz-col>
</viz-row>

<viz-row class="viz-justify-content-end">
  <viz-col>col 1</viz-col>
  <viz-col>col 2</viz-col>
</viz-row>

<viz-row class="viz-justify-content-between">
  <viz-col>col 1</viz-col>
  <viz-col>col 2</viz-col>
</viz-row>

<viz-row class="viz-justify-content-around">
  <viz-col>col 1</viz-col>
  <viz-col>col 2</viz-col>
</viz-row>