简易栅格
IMPORT MODULE

简化栅格系统运用的高阶组件,它由 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>

代码演示

1
2
3
4
基础

一行四列布局。

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

成员说明类型默认值全局配置
[gutter]间距,当 nzLayout:horizontal 时有效number32
[sg-container]指定表单元素最多分几列展示,最终一行几列由 col 配置结合响应式规则决定,'1','2','3','4','5','6'--
[col]指定表单元素最多分几列展示,最终一行几列由 col 配置结合响应式规则决定,'1','2','3','4','5','6'2

sg

成员说明类型默认值
[col]指定表单元素最多分几列展示,最终一行几列由 col 配置结合响应式规则决定,'1','2','3','4','5','6'-