8000 fix(abc:st): a more friendly expandIcon (#1842) · ng-alain/delon@9537212 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 9537212

Browse files
cipchkmo-gong
cipchk
and
mo-gong
authored
fix(abc:st): a more friendly expandIcon (#1842)
Co-authored-by: cipchk <cipchk@gmail.com>
1 parent 27ff917 commit 9537212

File tree

5 files changed

+28
-9
lines changed

5 files changed

+28
-9
lines changed

‎packages/abc/st/demo/expand.md

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,34 @@ Use `#expand` template implement expandable, allowing you to receive three value
1717
import { Component } from '@angular/core';
1818

1919
import { STColumn, STData, STModule } from '@delon/abc/st';
20+
import { NzButtonComponent } from 'ng-zorro-antd/button';
21+
import { NzIconDirective } from 'ng-zorro-antd/icon';
2022

2123
@Component({
2224
selector: 'app-demo',
2325
template: `
24-
<st [data]="users" [columns]="columns" [expand]="expand" expandRowByClick expandAccordion>
26+
<button nz-button nzType="primary" (click)="customIcon = !customIcon">Use Custom Icon</button>
27+
<st
28+
[data]="users"
29+
[columns]="columns"
30+
[expand]="expand"
31+
expandRowByClick
32+
expandAccordion
33+
[expandIcon]="customIcon ? expandIcon : null"
34+
>
2535
<ng-template #expand let-item let-index="index" let-column="column">
2636
{{ item.description }}
2737
</ng-template>
38+
<ng-template #expandIcon let-i let-index="index">
39+
<span nz-icon [nzType]="i.expand ? 'up' : 'down'"></span>
40+
</ng-template>
2841
</st>
2942
`,
3043
standalone: true,
31-
imports: [STModule]
44+
imports: [STModule, NzIconDirective, NzButtonComponent]
3245
})
3346
export class DemoComponent {
47+
customIcon = false;
3448
users: STData[] = Array(10)
3549
.fill({})
3650
.map((_, idx) => ({

‎packages/abc/st/index.en-US.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ When an exception is thrown when parsing column data, *INVALID DATA* will be for
8282
| `[widthConfig]` | Set col width can not used with width of STColumn | `string[]` | - | - |
8383
| `[expandRowByClick]` | Whether to expand row by clicking anywhere in the whole row | `boolean` | `false` | ✅ |
8484
| `[expandAccordion]` | Accordion mode | `boolean` | `false` | ✅ |
85-
| `[expand]` | Whether current column include expand icon | `TemplateRef<void>` | - | - |
86-
| `[expandIcon]` | Custom expand icon | `TemplateRef<void>` | - |
85+
| `[expand]` | Whether current column include expand icon | `TemplateRef<{ $implicit: STData; index: number }>` | - | - |
86+
| `[expandIcon]` | Custom expand icon | `TemplateRef<{ $implicit: STData; index: number }>` | - |
8787
| `[responsive]` | Whether to turn on responsive | `boolean` | `true` | ✅ |
8888
| `[responsiveHideHeaderFooter]` | Whether to display the header and footer under the small screen | `boolean` | `false` | ✅ |
8989
| `[resizable]` | Resize header of the current table, **Multiple headers not supported** | `STResizable, boolean` | - | - |

‎packages/abc/st/index.zh-CN.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ module: import { STModule } from '@delon/abc/st';
8282
| `[widthConfig]` | 表头分组时指定每列宽度，与 STColumn 的 width 不可混用 | `string[]` | - | - |
8383
| `[expandRowByClick]` | 通过点击行来展开子行 | `boolean` | `false` | ✅ |
8484
| `[expandAccordion]` | 手风琴模式 | `boolean` | `false` | ✅ |
85-
| `[expand]` | 当前列是否包含展开按钮，当数据源中包括 `expand` 表示展开状态 | `TemplateRef<void>` | - | - |
86-
| `[expandIcon]` | 自定义展开图标 | `TemplateRef<void>` | - |
85+
| `[expand]` | 当前列是否包含展开按钮，当数据源中包括 `expand` 表示展开状态 | `TemplateRef<{ $implicit: STData; index: number }>` | - | - |
86+
| `[expandIcon]` | 自定义展开图标 | `TemplateRef<{ $implicit: STData; index: number }>` | - |
8787
| `[responsive]` | 是否开启响应式 | `boolean` | `true` | ✅ |
8888
| `[responsiveHideHeaderFooter]` | 是否在小屏幕下才显示顶部与底部 | `boolean` | `false` | ✅ |
8989
| `[resizable]` | 当前表格所有列的调整表头配置项，**不支持多表头** | `STResizable, boolean` | - | - |

‎packages/abc/st/st.component.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,11 +160,16 @@
160160
<td
161161
[nzShowExpand]="expand && i.showExpand !== false"
162162
[nzExpand]="i.expand"
163-
[nzExpandIcon]="expandIcon"
163+
[nzExpandIcon]="expandIcon ? wrapExpandIcon : null"
164164
(nzExpandChange)="_expandChange(i, $event)"
165165
(click)="_stopPropagation($event)"
166166
nzWidth="50px"
167167
></td>
168+
<ng-template #wrapExpandIcon>
169+
<span (click)="_expandChange(i, !i.expand)">
170+
<ng-template [ngTemplateOutlet]="expandIcon" [ngTemplateOutletContext]="{ $implicit: i, index: index }" />
171+
</span>
172+
</ng-template>
168173
}
169174
@for (c of _columns; track cIdx; let cIdx = $index) {
170175
@if (i._values[cIdx].props?.colSpan > 0 && i._values[cIdx].props?.rowSpan > 0) {

‎packages/abc/st/st.component.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,8 +213,8 @@ export class STComponent implements AfterViewInit, OnChanges {
213213
@Input() body?: TemplateRef<{ $implicit: STStatisticalResults }> | null;
214214
@Input({ transform: booleanAttribute }) expandRowByClick = false;
215215
@Input({ transform: booleanAttribute }) expandAccordion = false;
216-
@Input() expand: TemplateRef<{ $implicit: NzSafeAny; index: number }> | null = null;
217-
@Input() expandIcon: TemplateRef<void> | null = null;
216+
@Input() expand: TemplateRef<{ $implicit: STData; index: number }> | null = null;
217+
@Input() expandIcon: TemplateRef<{ $implicit: STData; index: number }> | null = null;
218218
@Input() noResult?: string | TemplateRef<void> | null;
219219
@Input({ transform: booleanAttribute }) responsive: boolean = true;
220220
@Input({ transform: booleanAttribute }) responsiveHideHeaderFooter?: boolean;

0 commit comments

Comments
 (0)
0