Simple Grid
IMPORT MODULE

A higher-order components of grid systems, that consists of sg-container (directive) and sg components:

<div nz-row [nzGutter]="32">
  <nz-col nzXs="24" nzSm="12" nzMd="8" nzLg="6">1</nz-col>
  <nz-col nzXs="24" nzSm="12" nzMd="8" nzLg="6">2</nz-col>
  <nz-col nzXs="24" nzSm="12" nzMd="8" nzLg="6">3</nz-col>
  <nz-col nzXs="24" nzSm="12" nzMd="8" nzLg="6">4</nz-col>
</div>

More friendly:

<div sg-container="4">
  <sg>1</sg>
  <sg>2</sg>
  <sg>3</sg>
  <sg>4</sg>
</div>

Examples

1
2
3
4
Basic

1 rows & 4 columns layout.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-sg-basic',
  template: ` <div sg-container="4">
    <sg *ngFor="let i of ls; let idx = index">
      <div class="item">{{ idx + 1 }}</div>
    </sg>
  </div>`,
  styles: [
    `
      :host .sg__item {
        padding: 5px 0;
        text-align: center;
        border-radius: 0;
        min-height: 30px;
        margin-top: 8px;
        margin-bottom: 8px;
        color: #fff;
      }
      :host .item {
        background: #00a0e9;
        height: 120px;
        line-height: 120px;
        font-size: 13px;
      }
    `,
  ],
})
export class ComponentsSgBasicComponent {
  ls = Array(4).fill(0);
}

API

sg-container

PropertyDescriptionTypeDefaultGlobal Config
[gutter]specify the distance between two items, unit is px, only nzLayout:horizontalnumber32
[sg-container]specify the maximum number of columns to display, the final columns number is determined by col setting combined with Responsive Rules'1','2','3','4','5','6'--
[col]specify the maximum number of columns to display, the final columns number is determined by col setting combined with Responsive Rules'1','2','3','4','5','6'2

sg

PropertyDescriptionTypeDefault
[col]specify the maximum number of columns to display, the final columns number is determined by col setting combined with Responsive Rules'1','2','3','4','5','6'-