ng-angular-grid v0.0.11
ng-angular-grid
ng-angular-grid is a grid system similar to the one that bootstrap uses,the main purpose of creating of this library was so that it can be used as an alternaitve for styling libraries which have a poor or complicated grid system
Installation
npm install ng-angular-gridDemo
A Demo containing the container,row and column functonality can be found here
Import
import { NgAngularGridModule } from "ng-angular-grid";
@NgModule({
declarations: [...],
imports: [
...
NgAngularGridModule
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Container
ng-grid-container is used to add padding, contain and align your content according to the device.
By Default the ng-grid-container component has a margin-left and margin-right of 15px but this can be removed by using ngFluid parameter.
| Name | Type | Description |
|---|---|---|
| ngFluid | boolean | if true the margin from the left and right is set to 0 |
By Default the ngFluid is false
<ng-grid-container [ngFluid]="true">
Container with no margin from left and right
</ng-grid-container>Row
ng-grid-row component is used to create a horizontal group of columns. The ng-grid-column component must be an immediate children of the this component.
By default the ng-grid-row component has a gutter size of -15px but this can be removed by using ngNoGutters parameter
| Name | Type |Description
| ------ | ------ |------ |
| ngNoGutters | boolean | if true the margin left and right of ng-grid-row will be removed, furthermore the padding left and right of ng-grid-column will also be removed
Column
In ng-angular-grid the screen is divided into 12 vertical sections. You can sepcify how many vertical sections you want each column to have by passing Col paramater into ng-grid-column component.
<ng-grid-container>
<ng-grid-row >
<ng-grid-column [Col]="6">1st Column</ng-grid-column>
<ng-grid-column [Col]="6">2nd Column</ng-grid-column>
</ng-grid-row>
</ng-grid-container>You can sepecify the vertical sections based on the screen size as well by using the following parameters
| Name | Type | BreakPoints |
|---|---|---|
| Col | number | All |
| ColXL | number | ≥ 1200px |
| ColLg | number | ≥ 992px |
| ColMd | number | ≥ 768px |
| ColSm | number | ≥ 576px |
<ng-grid-container>
<ng-grid-row >
<ng-grid-column [ColLg]="4" [ColMd]="6" [ColSm]="12">
1st Column
</ng-grid-column>
<ng-grid-column [ColLg]="4" [ColMd]="6" [ColSm]="12">
2nd Column
</ng-grid-column>
</ng-grid-row>
</ng-grid-container>Common Parameters
These Parameters can be used with all of the components
The margin and padding have a default Unit of rem
| Name | Type | Description |
|---|---|---|
| ngMargin | number | Margin from all sides |
| ngMarginTop | number | Margin from Top |
| ngMarginRight | number | Margin from Right |
| ngMarginBottom | number | Margin from the Bottom |
| ngMarginLeft | number | Margin from the Left |
| ngPadding | number | Margin from all sides |
| ngPaddingTop | number | Margin from Top ` |
| ngPaddingRight | number | Margin from Right |
| ngPaddingBottom | number | Margin from the Bottom |
| ngPaddinginLeft | number | Margin from the Left |
| ngHideSm | boolean | if true the element is hidden on devices have screen size of less than equal to 576px |
| ngHideMd | boolean | if true the element is hidden on devices have screen size greatar 576px and less than equal 768px |
| ngHideLg | boolean | if true the element is hidden on devices have screen size greatar 768px and less than equal 1200px |
| ngHideXl | boolean | if true the element is hidden on devices have screen size greatar than 1200px |
Advanced
When importing you can provide two parameters to the NgAngularGridModule specifing the Unit of the padding and margin
| Name | Type |
|---|---|
| paddingUnit | string |
| marginUnit | string |
Allowed Unit types are
mm|cm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|%
import {NgAngularGridModule} from "ng-angular-grid";
@NgModule({
declarations: [...],
imports: [
NgAngularGridModule.forRoot({
paddingUnit:"px",
marginUnit:"px"
})
],
providers: [...],
bootstrap: [...]
})
export class AppModule { }