feat(layout): Navigation add Subheader component

taiga-family · Dec 23, 2024 · db0ea37 · db0ea37
1 parent 08f924d
commit db0ea37
Show file tree

Hide file tree

Showing 15 changed files with 475 additions and 187 deletions.
diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -1047,7 +1047,19 @@ export const pages: DocRoutePages = [
         title: 'Navigation',
         keywords: 'шапка, header, sidebar, aside, сайдбар, навигация, beaver',
         route: DemoRoute.Navigation,
-        meta: {scheme: 'beaver', name: 'navigation'},
+        meta: [
+            {scheme: 'beaver', anchor: 'full', name: 'navigation'},
+            {
+                scheme: 'beaver',
+                anchor: 'subheader-compact',
+                name: 'subheader-compact',
+            },
+            {
+                scheme: 'beaver',
+                anchor: 'subheader-object',
+                name: 'subheader-object',
+            },
+        ],
     },
     {
         section: 'Layout',

diff --git a/projects/demo/src/modules/components/navigation/examples/1/index.html b/projects/demo/src/modules/components/navigation/examples/1/index.html
@@ -252,19 +252,31 @@
     </aside>
     <main tuiNavigationMain>
         <nav
-            tuiNavigationNav
+            compact
+            tuiSubheader
             [style.position]="'sticky'"
         >
-            <a routerLink=".">
-                <tui-icon icon="@tui.chevron-left" />
-                Back
-            </a>
-            /
-            <span tuiNavigationLogo>
-                <span tuiFade>Groups</span>
-                <tui-badge iconStart="@tui.lock">Status</tui-badge>
-            </span>
-            <hr />
+            <tui-breadcrumbs [itemsLimit]="10">
+                <ng-container *ngFor="let item of breadcrumbs; let last = last">
+                    <ng-container *ngIf="last">
+                        <strong
+                            *tuiItem
+                            tuiFade
+                        >
+                            {{ item }}
+                        </strong>
+                    </ng-container>
+                    <ng-container *ngIf="!last">
+                        <button
+                            *tuiItem
+                            tuiLink
+                            type="button"
+                        >
+                            {{ item }}
+                        </button>
+                    </ng-container>
+                </ng-container>
+            </tui-breadcrumbs>
             <tui-tabs tuiFade>
                 <button
                     tuiTab

diff --git a/projects/demo/src/modules/components/navigation/examples/1/index.ts b/projects/demo/src/modules/components/navigation/examples/1/index.ts
@@ -1,4 +1,4 @@
-import {KeyValuePipe, NgForOf} from '@angular/common';
+import {KeyValuePipe, NgForOf, NgIf} from '@angular/common';
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {RouterLink, RouterLinkActive} from '@angular/router';
@@ -13,13 +13,15 @@ import {
     TuiDropdown,
     TuiDropdownService,
     TuiIcon,
+    TuiLink,
     TuiTextfield,
     TuiTitle,
 } from '@taiga-ui/core';
 import {
     TuiAvatar,
     TuiBadge,
     TuiBadgeNotification,
+    TuiBreadcrumbs,
     TuiChevron,
     TuiDataListDropdownManager,
     TuiFade,
@@ -59,6 +61,9 @@ const ICON =
         TuiTabs,
         TuiTextfield,
         TuiTitle,
+        TuiBreadcrumbs,
+        TuiLink,
+        NgIf,
     ],
     templateUrl: './index.html',
     encapsulation,
@@ -71,6 +76,7 @@ export default class Example extends TuiPortals {
     protected open = false;
     protected switch = false;
     protected readonly routes = DemoRoute;
+    protected readonly breadcrumbs = ['Home', 'Angular', 'Repositories', 'Taiga UI'];
 
     protected readonly drawer = {
         Components: [

diff --git a/projects/demo/src/modules/components/navigation/examples/2/index.html b/projects/demo/src/modules/components/navigation/examples/2/index.html
@@ -19,108 +19,70 @@
     </button>
 </header>
 <main tuiNavigationMain>
-    <a
-        appearance="action-grayscale"
-        iconStart="@tui.chevron-left"
-        size="xs"
-        tuiButton
-    >
-        Back
-    </a>
-    <header tuiHeader>
-        <h1 tuiTitle>
-            <div tuiNavigationLogo>
-                <tui-icon icon="@tui.gitlab" />
-                <span tuiFade>Research and Development Platform</span>
-                <tui-icon
-                    icon="@tui.heart"
-                    tuiBadge
-                />
-            </div>
-            <div tuiSubtitle>
-                In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the
-                visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used
-                as a placeholder before the final copy is available. It is also used to temporarily replace text, which
-                allows designers to consider the form of a webpage or publication, without the meaning of the text
-                influencing the design.
-            </div>
-            <div
-                tuiCaption
-                tuiFade
-            >
-                <span>
-                    <tui-icon icon="@tui.user" />
-                    Alex Inkin
-                </span>
-                <span>Edited 6 minutes ago</span>
-                <span>
-                    <tui-icon icon="@tui.lock" />
-                    Private
-                </span>
-            </div>
-        </h1>
-        <aside tuiAccessories>
-            <button
-                appearance="secondary"
-                tuiButton
-                type="button"
-            >
-                Secondary
-            </button>
-            <button
-                tuiButton
-                type="button"
-            >
-                Primary
-            </button>
-            <button
-                appearance="secondary"
-                iconStart="@tui.ellipsis"
-                tuiIconButton
-                type="button"
-            >
-                More
-            </button>
-        </aside>
-    </header>
     <nav
-        tuiNavigationNav
-        [style.position]="'sticky'"
+        compact
+        tuiSubheader
     >
+        <a
+            iconStart="@tui.chevron-left"
+            tuiLink
+            [textContent]="'Repositories'"
+        ></a>
+        /
+        <strong tuiFade>Very long repository name</strong>
+        <tui-avatar
+            size="xs"
+            src="@tui.lock"
+        />
         <tui-tabs>
-            <button
-                tuiTab
-                type="button"
-            >
-                Default view
-            </button>
-            <button
-                tuiTab
-                type="button"
-            >
-                Details
-            </button>
-            <button
-                tuiTab
-                type="button"
-            >
-                Followers
-            </button>
+            <a tuiTab>Default view</a>
+            <a tuiTab>Contributors</a>
+            <a tuiTab>Code</a>
         </tui-tabs>
-        <hr />
+        <button
+            appearance="secondary"
+            tuiButton
+            type="button"
+        >
+            Button
+        </button>
         <button
             tuiButton
             type="button"
         >
-            Primary
+            Button
         </button>
         <button
             appearance="secondary"
             iconStart="@tui.ellipsis"
+            tuiDropdownOpen
             tuiIconButton
             type="button"
+            [tuiDropdown]="menu"
         >
             More
+            <ng-template #menu>
+                <tui-data-list>
+                    <button
+                        tuiOption
+                        type="button"
+                    >
+                        Button
+                    </button>
+                    <button
+                        tuiOption
+                        type="button"
+                    >
+                        Button
+                    </button>
+                    <button
+                        tuiOption
+                        type="button"
+                    >
+                        Button
+                    </button>
+                </tui-data-list>
+            </ng-template>
         </button>
     </nav>
     <div

diff --git a/projects/demo/src/modules/components/navigation/examples/2/index.ts b/projects/demo/src/modules/components/navigation/examples/2/index.ts
@@ -3,8 +3,23 @@ import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiRepeatTimes, TuiThemeColorService} from '@taiga-ui/cdk';
-import {TuiAppearance, TuiButton, TuiDropdown, TuiIcon, TuiTitle} from '@taiga-ui/core';
-import {TuiBadge, TuiChevron, TuiFade, TuiSwitch, TuiTabs} from '@taiga-ui/kit';
+import {
+    TuiAppearance,
+    TuiButton,
+    TuiDataList,
+    TuiDropdown,
+    TuiIcon,
+    TuiLink,
+    TuiTitle,
+} from '@taiga-ui/core';
+import {
+    TuiAvatar,
+    TuiBadge,
+    TuiChevron,
+    TuiFade,
+    TuiSwitch,
+    TuiTabs,
+} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout';
 
 @Component({
@@ -25,6 +40,9 @@ import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout';
         TuiSwitch,
         TuiTabs,
         TuiTitle,
+        TuiLink,
+        TuiAvatar,
+        TuiDataList,
     ],
     templateUrl: './index.html',
     encapsulation,