diff --git a/.cspell.json b/.cspell.json index 6e5909793cd8..e3f0ed4e7946 100644 --- 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 index d96e7120f696..35f562e45bc4 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -1047,7 +1047,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 index febbb7ceee88..2e31911ae9b1 100644 --- 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 @@
+ +

Some random content diff --git a/projects/demo/src/modules/components/navigation/examples/3/index.ts b/projects/demo/src/modules/components/navigation/examples/3/index.ts index 332302230018..6f8c5cbba256 100644 --- a/projects/demo/src/modules/components/navigation/examples/3/index.ts +++ b/projects/demo/src/modules/components/navigation/examples/3/index.ts @@ -1,38 +1,47 @@ +import {NgIf} from '@angular/common'; import {Component} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiItem, TuiRepeatTimes} from '@taiga-ui/cdk'; +import {TuiRepeatTimes} from '@taiga-ui/cdk'; import { TuiAppearance, TuiButton, + TuiGroup, TuiIcon, TuiLink, - TuiSurface, + TuiTextfield, TuiTitle, } from '@taiga-ui/core'; -import {TuiAvatar, TuiBreadcrumbs, TuiTabs} from '@taiga-ui/kit'; +import {TuiBadge, TuiBlock, TuiBreadcrumbs, TuiFade, TuiTabs} from '@taiga-ui/kit'; import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout'; @Component({ standalone: true, imports: [ + FormsModule, + NgIf, TuiAppearance, - TuiAvatar, + TuiBadge, + TuiBlock, TuiBreadcrumbs, TuiButton, TuiCardLarge, + TuiFade, + TuiGroup, TuiHeader, TuiIcon, - TuiItem, TuiLink, TuiNavigation, TuiRepeatTimes, - TuiSurface, TuiTabs, + TuiTextfield, TuiTitle, ], templateUrl: './index.html', encapsulation, changeDetection, }) -export default class Example {} +export default class Example { + protected current = 'basic'; +} diff --git a/projects/demo/src/modules/components/navigation/index.ts b/projects/demo/src/modules/components/navigation/index.ts index 996f4fe24cbc..7b6af88b3ab7 100644 --- a/projects/demo/src/modules/components/navigation/index.ts +++ b/projects/demo/src/modules/components/navigation/index.ts @@ -17,8 +17,8 @@ export default class Page implements OnDestroy { protected readonly theme = inject(TuiThemeColorService); protected readonly examples = [ 'Full', - 'Expansive heading', - 'Card heading', + 'Subheader compact', + 'Subheader object', 'Customization', ]; diff --git a/projects/layout/components/navigation/drawer.style.less b/projects/layout/components/navigation/drawer.style.less index e2588f157c37..cbe080dacc9c 100644 --- a/projects/layout/components/navigation/drawer.style.less +++ b/projects/layout/components/navigation/drawer.style.less @@ -4,7 +4,7 @@ right: 0; bottom: 0; background: var(--tui-theme-color, #000); - inline-size: 13.75rem; + inline-size: 14.375rem; color: var(--tui-text-primary); pointer-events: auto; diff --git a/projects/layout/components/navigation/index.ts b/projects/layout/components/navigation/index.ts index eb8e1ffbcd87..7e9f988df9bc 100644 --- a/projects/layout/components/navigation/index.ts +++ b/projects/layout/components/navigation/index.ts @@ -8,3 +8,4 @@ export * from './logo.component'; export * from './main.component'; export * from './nav.component'; export * from './navigation'; +export * from './subheader.component'; diff --git a/projects/layout/components/navigation/main.style.less b/projects/layout/components/navigation/main.style.less index 0f2a8532a0a3..c7135510fac7 100644 --- a/projects/layout/components/navigation/main.style.less +++ b/projects/layout/components/navigation/main.style.less @@ -3,6 +3,7 @@ main[tuiNavigationMain] { .transition(max-width); + position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 8.5625rem)); align-items: start; @@ -14,6 +15,12 @@ main[tuiNavigationMain] { isolation: isolate; box-sizing: border-box; + > * { + grid-column: span 12; + max-inline-size: 100%; + } + + // @deprecated from here > nav[tuiNavigationNav]:not(:first-child) { border-image: conic-gradient(var(--tui-background-base) 0 0) fill 0/0/0 100vw; box-shadow: inset 0 -1px var(--tui-border-normal); @@ -84,9 +91,4 @@ main[tuiNavigationMain] { margin-top: 0.875rem; justify-self: flex-start; } - - > * { - grid-column: span 12; - max-inline-size: 100%; - } } diff --git a/projects/layout/components/navigation/navigation.ts b/projects/layout/components/navigation/navigation.ts index 12e80a2daf76..5159d0d66750 100644 --- a/projects/layout/components/navigation/navigation.ts +++ b/projects/layout/components/navigation/navigation.ts @@ -7,6 +7,7 @@ import {TuiHintAsideDirective} from './hint-aside.directive'; import {TuiLogoComponent} from './logo.component'; import {TuiMainComponent} from './main.component'; import {TuiNavComponent} from './nav.component'; +import {TuiSubheaderCompactComponent, TuiSubheaderComponent} from './subheader.component'; export const TuiNavigation = [ TuiHeaderComponent, @@ -18,4 +19,6 @@ export const TuiNavigation = [ TuiNavComponent, TuiHintAsideDirective, TuiDrawerDirective, + TuiSubheaderComponent, + TuiSubheaderCompactComponent, ] as const; diff --git a/projects/layout/components/navigation/subheader.component.ts b/projects/layout/components/navigation/subheader.component.ts new file mode 100644 index 000000000000..8320bdce007c --- /dev/null +++ b/projects/layout/components/navigation/subheader.component.ts @@ -0,0 +1,59 @@ +import { + ChangeDetectionStrategy, + Component, + signal, + ViewEncapsulation, +} from '@angular/core'; +import {tuiButtonOptionsProvider} from '@taiga-ui/core/components/button'; +import {tuiLinkOptionsProvider} from '@taiga-ui/core/components/link'; +import {tuiTextfieldOptionsProvider} from '@taiga-ui/core/components/textfield'; +import {tuiDropdownOptionsProvider} from '@taiga-ui/core/directives/dropdown'; +import {tuiBreadcrumbsOptionsProvider} from '@taiga-ui/kit/components/breadcrumbs'; +import {tuiTabsOptionsProvider} from '@taiga-ui/kit/components/tabs'; + +const PROVIDERS = [ + tuiTextfieldOptionsProvider({size: signal('s')}), + tuiBreadcrumbsOptionsProvider({icon: '/'}), + tuiLinkOptionsProvider({appearance: 'action-grayscale'}), + tuiTabsOptionsProvider({size: 'm'}), + tuiDropdownOptionsProvider({align: 'right'}), +]; + +@Component({ + standalone: true, + selector: '[tuiSubheader]:not([compact])', + template: ` + + + + + + `, + styleUrls: ['./subheader.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [ + PROVIDERS, + tuiButtonOptionsProvider({appearance: 'secondary', size: 'xs'}), + ], +}) +export class TuiSubheaderComponent {} + +@Component({ + standalone: true, + selector: '[tuiSubheader][compact]', + template: ` +
+ + + +
+ `, + styleUrls: ['./subheader.style.less'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [PROVIDERS, tuiButtonOptionsProvider({size: 's'})], +}) +export class TuiSubheaderCompactComponent {} diff --git a/projects/layout/components/navigation/subheader.style.less b/projects/layout/components/navigation/subheader.style.less new file mode 100644 index 000000000000..c7698e592ab3 --- /dev/null +++ b/projects/layout/components/navigation/subheader.style.less @@ -0,0 +1,93 @@ +[tuiSubheader][compact] { + top: 3rem; + z-index: 1; + block-size: var(--tui-height-m); + padding-block-start: 0.25rem; + + .t-nav-subheader { + position: absolute; + top: 0; + left: 0; + right: 0; + display: flex; + block-size: inherit; + align-items: center; + gap: 0.5rem; + font: var(--tui-font-text-s); + white-space: nowrap; + overflow: hidden; + padding: inherit; + border-image: linear-gradient(0deg, var(--tui-border-normal) 1px, var(--tui-background-base) 0) fill 0/0/0 100vw; + + tui-breadcrumbs { + flex: 1; + overflow: hidden; + } + + > tui-tabs, + > tui-tabs-with-more, + > [tuiTabs], + > [tuiTabsWithMore] { + margin-inline-start: auto; + margin-inline-end: 1.5rem; + border-inline-start: 3rem solid transparent; + box-shadow: none; + } + + tui-tabs::before, + tui-tabs-with-more::before, + [tuiTabs]::before, + [tuiTabsWithMore]::before { + background: var(--tui-background-accent-opposite-pressed); + } + } +} + +[tuiSubheader]:not([compact]) { + margin-block-start: 0.875rem; + + [tuiHeader] { + margin: 1rem 0 0.5rem; + + &:first-child { + margin-block-start: 0; + } + + [tuiTitle] { + max-inline-size: 42rem; + margin-inline-end: auto; + } + + [tuiSubtitle] { + font: var(--tui-font-text-s); + + tui-icon { + font-size: 1rem; + } + } + + & + tui-textfield { + margin-block-start: 0.75rem; + } + } + + tui-tabs, + [tuiTabs] { + margin-block-start: 0.5rem; + + &::before { + background: var(--tui-background-accent-opposite-pressed); + } + + [tuiButton], + [tuiIconButton] { + margin-inline-start: 0.5rem; + align-self: center; + } + + [tuiTab] + [tuiButton], + [tuiTab] + [tuiIconButton] { + margin-inline-start: auto; + } + } +}