Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(layout): Navigation add Subheader component #10041

Merged
merged 3 commits into from
Dec 23, 2024
Merged

feat(layout): Navigation add Subheader component #10041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
db0ea37
feat(layout): `Navigation` add `Subheader` component
waterplea Dec 23, 2024
a9cbd65
chore: apply changes after linting [bot]
taiga-family-bot Dec 23, 2024
a7f68e7
chore: fix
waterplea Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .cspell.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"ignoreWords": [
"Wachovia",
"bottomsheet",
"subheaders",
"appbar",
"qwertypgj_",
"antialiasing",
Expand Down
16 changes: 15 additions & 1 deletion projects/demo/src/modules/app/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
34 changes: 23 additions & 11 deletions projects/demo/src/modules/components/navigation/examples/1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 7 additions & 1 deletion projects/demo/src/modules/components/navigation/examples/1/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -13,13 +13,15 @@ import {
TuiDropdown,
TuiDropdownService,
TuiIcon,
TuiLink,
TuiTextfield,
TuiTitle,
} from '@taiga-ui/core';
import {
TuiAvatar,
TuiBadge,
TuiBadgeNotification,
TuiBreadcrumbs,
TuiChevron,
TuiDataListDropdownManager,
TuiFade,
Expand All @@ -37,12 +39,14 @@ const ICON =
FormsModule,
KeyValuePipe,
NgForOf,
NgIf,
RouterLink,
RouterLinkActive,
TuiAppearance,
TuiAvatar,
TuiBadge,
TuiBadgeNotification,
TuiBreadcrumbs,
TuiButton,
TuiCardLarge,
TuiChevron,
Expand All @@ -53,6 +57,7 @@ const ICON =
TuiForm,
TuiHeader,
TuiIcon,
TuiLink,
TuiNavigation,
TuiRepeatTimes,
TuiSwitch,
Expand All @@ -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: [
Expand Down
134 changes: 48 additions & 86 deletions projects/demo/src/modules/components/navigation/examples/2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
22 changes: 20 additions & 2 deletions projects/demo/src/modules/components/navigation/examples/2/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading
Loading