简易栅格
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
5
6
7
8
9
10
11
基础

一行四列布局。

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

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

@Component({
  selector: 'components-sg-basic',
  template: ` <div sg-container="4">
    @for (i of ls; track $index) {
      <sg [col]="$index === 5 ? 2 : null">
        <div class="item">{{ $index + 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;
      }
    `
  ],
  standalone: true,
  imports: [SGModule]
})
export class ComponentsSgBasicComponent {
  ls = Array(11).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'-
Loading...