Applab-grid NPM

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>

tslib

@everything-registry/sub-chunk-1156 @zalastax/nolb-appl

0.0.1

2 years ago