0.0.4 • Published 2 years ago
beyond-grid v0.0.4
Beyond's Grid Library
Installation
Install beyond-grid with npm
npm install beyond-grid --save
Implementation
In the your module importa and add to imports the beyondGridModule
import { BeyondGridModule } from 'beyond-grid';
imports: [
...
BeyondGridModule,
...
],
API Reference
Container
<beyond-container>
.......................
</beyond-container>
Description |
---|
Container with 50px padding on top and bottom |
and dynamic padding of 5% on left and right. |
Rows
<beyond-rows [cols]="10">
.......................
</beyond-rows>
Parameter | Type | Description |
---|---|---|
[cols] | number | Required. Number of culums for row |
colums
<beyond-col [size]="10" [sizeXS]="10"
[sizeS]="10" [sizeM]="10"
[sizeL]="10" [sizeXL]="10">
.......................
</beyond-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 { BeyondGridModule } from 'beyond-grid';
imports: [
...
BeyondGridModule,
...
],
app.component.html
<beyond-container>
<beyond-rows [cols]="12">
<beyond-col [size]="12"
[sizeXS]="12"
[sizeS]="6"
[sizeM]="6"
[sizeL]="4"
[sizeXL]="3">
contain
</beyond-col>
<beyond-col [size]="5">
contain
</beyond-col>
</beyond-rows>
</beyond-container>
10 colums
app-module
import { BeyondGridModule } from 'beyond-grid';
imports: [
...
BeyondGridModule,
...
],
app.component.html
<beyond-container>
<beyond-rows [cols]="10">
<beyond-col [size]="10"
[sizeXS]="10"
[sizeS]="10"
[sizeM]="10"
[sizeL]="10"
[sizeXL]="10">
contain
</beyond-col>
<beyond-col [size]="5">
contain
</beyond-col>
</beyond-rows>
</beyond-container>