NGX-JABUTI-GRID

How to install

Below are ways to install the library using npm:

npm i ngx-jabuti-grid

How to use properties component

First import the module from the lib in the module you want to use it

  imports: [
    BrowserModule,
    NgxJabutiGridModule
  ],

<h3>Jabuti grid one</h3>
<ngx-jabuti-grid [row]="true">
  <ngx-jabuti-grid [column]="true" sm="12" md="4">
    <h1>Column1</h1>
  </ngx-jabuti-grid>
  <ngx-jabuti-grid [column]="true" sm="12" md="4">
    <h1>Column2</h1>
  </ngx-jabuti-grid>
  <ngx-jabuti-grid [column]="true" sm="12" md="4">
    <h1>Column3</h1>
  </ngx-jabuti-grid>

</ngx-jabuti-grid>
<hr>
<h3>Jabuti grid two</h3>
<ngx-jabuti-grid expanded="row expanded">
  <ngx-jabuti-grid [column]="true" sm="12" md="4">
    <h1>Column1</h1>
  </ngx-jabuti-grid>
  <ngx-jabuti-grid [column]="true" sm="12" md="4">
    <h1>Column2</h1>
  </ngx-jabuti-grid>
  <ngx-jabuti-grid [column]="true" sm="12" md="4">
    <h1>Column3</h1>
  </ngx-jabuti-grid>

</ngx-jabuti-grid>
<hr>
<h3>Jabuti grid three</h3>

<ngx-jabuti-grid [row]="true">
  <ngx-jabuti-grid [column]="true" sm="12" md="2">
    <h1>Column1</h1>
  </ngx-jabuti-grid>
  <ngx-jabuti-grid [column]="true" sm="12" md="2">
    <h1>Column2</h1>
  </ngx-jabuti-grid>
  <ngx-jabuti-grid [column]="true" sm="12" md="2">
    <h1>Column3</h1>
  </ngx-jabuti-grid>

</ngx-jabuti-grid>

Result

Grid options

of columns - 12

Properties

| Props | type | Description | | ------------------- | ------- | --------------------------------- | | column | boolean | column direction | | row | boolean | row direction | | expanded | string | for maximum width none | | lg | string | for screens higher than 1200px | | md | string | for screens higher than 970px | | sm | number | for screens higher than 768px |