AppLab's Grid Library

Installation

Install applab-grid with npm

  npm i applab-grid --save

Implementation

In the your module importa and add to imports the applabGridModule

import { applabGridModule } from 'applab-grid';

imports: [
    ...
    applabGridModule,
    ...
],

API Reference

Container

  <applab-container>
    .......................
  </applab-container>

| Description | | :-----------------------------------------: | |Container with 50px padding on top and bottom| |and dynamic padding of 5% on left and right. |

Rows

  <applab-rows [cols]="10">
    .......................
  </applab-rows>

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | [cols] | number | Required. Number of culums for row |

colums

    <applab-col [size]="10" [sizeXS]="10" 
                [sizeS]="10" [sizeM]="10" 
                [sizeL]="10" [sizeXL]="10">
        .......................
    </applab-col>

| Parameter | Type | Description | | :-------- | :------- | :-------------------------------- | | [size] | number | Required. Container size automatic | | [sizeXS] | number | Container size of 0px to 575px | | [sizeS] | number | Container size equal or mayor to 576px | | [sizeM] | number | Container size equal or mayor to 768px | | [sizeL] | number | Container size equal or mayor to 992px | | [sizeXL] | number | Container size equal or mayor to 1200px| | [rows] | number | rows using column 1 to 12 Default 1 |

Note: The size of a container must be equal to or less than the number of columns in a row and the tag(s) must be inside a tag and the max number of columns on row is 12

Usage/Examples

12 columns (max number of columns)

app-module

import { applabGridModule } from 'applab-grid';

imports: [
    ...
    applabGridModule,
    ...
],

app.component.html

<applab-container>
    <applab-rows [cols]="12">
        <applab-col   [size]="12" 
                      [sizeXS]="12" 
                      [sizeS]="6" 
                      [sizeM]="6" 
                      [sizeL]="4" 
                      [sizeXL]="3">
           contain
        </applab-col>

        <applab-col [size]="5">
            contain
        </applab-col>
    </applab-rows>
</applab-container>

10 colums

app-module

import { applabGridModule } from 'applab-grid';

imports: [
    ...
    applabGridModule,
    ...
],

app.component.html

<applab-container>
    <applab-rows [cols]="10">
        <applab-col [size]="10" 
                    [sizeXS]="10" 
                    [sizeS]="10" 
                    [sizeM]="10" 
                    [sizeL]="10" 
                    [sizeXL]="10">
           contain
        </applab-col>

        <applab-col [size]="5">
            contain
        </applab-col>
    </applab-rows>
</applab-container>