feat(layout): Navigation add Subheader component (#10041)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Dec 23, 2024 · 7de5985 · 7de5985
1 parent 5e20a26
commit 7de5985
Show file tree

Hide file tree

Showing 15 changed files with 471 additions and 180 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -6,6 +6,7 @@
     "ignoreWords": [
         "Wachovia",
         "bottomsheet",
+        "subheaders",
         "appbar",
         "qwertypgj_",
         "antialiasing",

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -1041,7 +1041,21 @@ 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: 'subheaders',
+                qualifiedName: 'subheader-compact',
+            },
+            {
+                scheme: 'beaver',
+                anchor: 'subheader-object',
+                name: 'subheaders',
+                qualifiedName: '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,
@@ -37,12 +39,14 @@ const ICON =
         FormsModule,
         KeyValuePipe,
         NgForOf,
+        NgIf,
         RouterLink,
         RouterLinkActive,
         TuiAppearance,
         TuiAvatar,
         TuiBadge,
         TuiBadgeNotification,
+        TuiBreadcrumbs,
         TuiButton,
         TuiCardLarge,
         TuiChevron,
@@ -53,6 +57,7 @@ const ICON =
         TuiForm,
         TuiHeader,
         TuiIcon,
+        TuiLink,
         TuiNavigation,
         TuiRepeatTimes,
         TuiSwitch,
@@ -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,23 +3,41 @@ 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({
     standalone: true,
     imports: [
         FormsModule,
         TuiAppearance,
+        TuiAvatar,
         TuiBadge,
         TuiButton,
         TuiCardLarge,
         TuiChevron,
+        TuiDataList,
         TuiDropdown,
         TuiFade,
         TuiHeader,
         TuiIcon,
+        TuiLink,
         TuiNavigation,
         TuiRepeatTimes,
         TuiSwitch,