sg 简易栅格

简化栅格系统运用的高阶组件，它由 sg-container 容器（指令）和 sg 组件组合代替一个响应式布局：

<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>

替代：

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

import { SGModule } from '@delon/abc/sg';

代码演示

基础

一行四列布局。

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

sg