Merge pull request #1944 from zyfra/fix/tab-listing-1859_v3

fix(components/tabs): template usage for tabs listing #1859
zyfra · Aug 12, 2024 · 707e302 · 707e302
2 parents 9f80a23 + ce3cad8
commit 707e302
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git a/...c/app/components/tabs/examples/tabs-example-component/tabs-example-component.component.ts b/...c/app/components/tabs/examples/tabs-example-component/tabs-example-component.component.ts
@@ -24,5 +24,35 @@ export class TabsExampleComponentComponent {
  {
  title: 'Вкладка 4',
  },
+ {
+ title: 'Вкладка 5',
+ },
+ {
+ title: 'Вкладка 6',
+ },
+ {
+ title: 'Вкладка 7',
+ },
+ {
+ title: 'Вкладка 8',
+ },
+ {
+ title: 'Вкладка 9',
+ },
+ {
+ title: 'Вкладка 10',
+ },
+ {
+ title: 'Вкладка 11',
+ },
+ {
+ title: 'Вкладка 12',
+ },
+ {
+ title: 'Вкладка 13',
+ },
+ {
+ title: 'Вкладка 14',
+ },
  ];
 }
diff --git a/...mponents/tabs/examples/tabs-example-component/tabs-example-content-component.component.ts b/...mponents/tabs/examples/tabs-example-component/tabs-example-content-component.component.ts
@@ -1,9 +1,9 @@
 import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
-import { POLYMORPH_CONTEXT, PrizmTabContext, PrizmTabItem } from '@prizm-ui/components';
+import { POLYMORPH_CONTEXT, PrizmTabContext } from '@prizm-ui/components';
 
 @Component({
  selector: 'prizm-tabs-example-component-content',
- template: `{{ context.idx + 1 }}`,
+ template: `{{ context.idx + 1 }} element`,
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TabsExampleComponentContentComponent {

diff --git a/libs/components/src/lib/components/tabs/tabs.component.html b/libs/components/src/lib/components/tabs/tabs.component.html
@@ -80,16 +80,17 @@
  <div class="icon-placeholder"></div>
  </ng-template>
  </ng-container>
-
- <ng-container>
- <div
- class="tab-content"
- #elem
- [prizmHint]="tab.content"
- [prizmHintCanShow]="$any(elem | prizmCallFunc : prizmIsTextOverflow$ | async)"
- >
- {{ tab.content }}
- </div>
+ <ng-container *ngIf="tab.content as content">
+ <ng-container *polymorphOutlet="content; context: $any({ idx: i, tab: this })">
+ <div
+ class="tab-content"
+ #elem
+ [prizmHint]="content"
+ [prizmHintCanShow]="$any(elem | prizmCallFunc : prizmIsTextOverflow$ | async)"
+ >
+ {{ content }}
+ </div>
+ </ng-container>
  </ng-container>
 
  <ng-container rightBox>