NG-ALAIN- CURD
st 表格 sv 查看 se 编辑 cell 单元格数据 sf 动态表单 LIB
- 基础
hotkey 热键 let 定义 media HTML5媒体 reuse-tab 路由复用标签 loading 加载指示符 pdf Pdf qr 二维码 lodop Lodop打印 xlsx Excel 操作 Observers 观察者 onboarding 用户引导流程 zip Zip 操作 图表 G2 LIB avatar-list 用户头像列表 count-down 倒计时 down-file 下载文件 主题系统 LIB 工具集 LIB
- 表单
range-picker 日期范围 error-collect 表单异常消息采集器
- 布局
sg 简易栅格 ellipsis 文本自动省略号 exception 异常 footer-toolbar 底部工具栏 full-content 全屏工作区 global-footer 全局页脚 page-header 页头 result 处理结果 tag-select 标签选择器
- 业务
用户认证 LIB notice-icon 通知菜单 quick-menu 快速菜单 访问控制列表 LIB 缓存 LIB Mock模拟数据 LIB
- 其它
auto-focus 自动获得焦点 highlight 高亮
简化栅格系统运用的高阶组件，它由 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
一行四列布局。
import { Component } from '@angular/core';
import { SGModule } from '@delon/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);
}