chore(demo): fix example (#6177)

taiga-family · Dec 11, 2023 · 45a00bb · 45a00bb
1 parent a67423f
commit 45a00bb
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/projects/demo/src/modules/components/tabs/examples/5/index.html b/projects/demo/src/modules/components/tabs/examples/5/index.html
@@ -21,8 +21,8 @@ <h1 class="tui-text_h3 title">Monty Python</h1>
             <ng-template #submenu>
                 <tui-hosted-dropdown
                     *tuiItem
+                    #hosted
                     [content]="dropdown"
-                    [(open)]="open"
                 >
                     <button
                         tuiTab
@@ -32,7 +32,7 @@ <h1 class="tui-text_h3 title">Monty Python</h1>
                         <tui-svg
                             src="tuiIconChevronDown"
                             class="icon"
-                            [class.icon_rotated]="open"
+                            [class.icon_rotated]="hosted.open"
                         ></tui-svg>
                     </button>
                 </tui-hosted-dropdown>
@@ -41,12 +41,16 @@ <h1 class="tui-text_h3 title">Monty Python</h1>
     </tui-tabs-with-more>
 </div>
 <section class="content">Currently active: {{ activeElement }}</section>
-<ng-template #dropdown>
-    <tui-data-list>
+<ng-template
+    #dropdown
+    let-activeZone
+    let-close="close"
+>
+    <tui-data-list [tuiActiveZoneParent]="activeZone">
         <button
             *ngFor="let collaborator of collaborators"
             tuiOption
-            (click)="onClick(collaborator)"
+            (click)="onClick(collaborator); close()"
         >
             {{ collaborator }}
         </button>

diff --git a/projects/demo/src/modules/components/tabs/examples/5/index.ts b/projects/demo/src/modules/components/tabs/examples/5/index.ts
@@ -25,8 +25,6 @@ export class TuiTabsExample5 {
 
     activeElement = String(this.tabs[0]);
 
-    open = false;
-
     get activeItemIndex(): number {
         if (this.collaborators.includes(this.activeElement)) {
             return this.tabs.indexOf(this.collaborators);
@@ -42,7 +40,6 @@ export class TuiTabsExample5 {
 
     onClick(activeElement: string): void {
         this.activeElement = activeElement;
-        this.open = false;
     }
 
     isString(tab: unknown): tab is string {

diff --git a/projects/demo/src/modules/components/tabs/tabs.module.ts b/projects/demo/src/modules/components/tabs/tabs.module.ts
@@ -4,6 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {TuiMobileTabsModule, TuiRippleModule} from '@taiga-ui/addon-mobile';
+import {TuiActiveZoneModule} from '@taiga-ui/cdk';
 import {
     TuiButtonModule,
     TuiDataListModule,
@@ -43,6 +44,7 @@ import {ExampleTuiTabsComponent} from './tabs.component';
         TuiMobileTabsModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiTabsComponent)),
         TuiScrollbarModule,
+        TuiActiveZoneModule,
     ],
     declarations: [
         ExampleTuiTabsComponent,

diff --git a/projects/kit/components/tabs/tabs-with-more/tabs-with-more.style.less b/projects/kit/components/tabs/tabs-with-more/tabs-with-more.style.less
@@ -77,10 +77,19 @@
             box-shadow: none;
             background: var(--tui-clear);
         }
+
+        .t-highlight {
+            background: transparent !important;
+        }
     }
     /* stylelint-enable */
 }
 
+.t-dropdown-item {
+    display: flex;
+    flex-direction: column;
+}
+
 .t-no-margin {
     margin-left: 0;
 }
diff --git a/projects/kit/components/tabs/tabs-with-more/tabs-with-more.template.html b/projects/kit/components/tabs/tabs-with-more/tabs-with-more.template.html
@@ -54,6 +54,7 @@
         >
             <div
                 *ngFor="let item of items; let index = index"
+                class="t-dropdown-item"
                 (tui-tab-activate)="onClick(index)"
             >
                 <ng-container