-
Notifications
You must be signed in to change notification settings - Fork 471
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(experimental):
Navigation add new module (#6827)
Co-authored-by: taiga-family-bot <[email protected]>
- Loading branch information
1 parent
372c780
commit 1a688ce
Showing
32 changed files
with
1,091 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
182 changes: 182 additions & 0 deletions
182
projects/demo/src/modules/experimental/navigation/examples/1/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| <header tuiNavigationHeader> | ||
| <button | ||
| appearance="secondary" | ||
| iconLeft="tuiIconGrid" | ||
| tuiIconButton | ||
| > | ||
| Menu | ||
| </button> | ||
| <span tuiNavigationLogo> | ||
| <tui-icon icon="tuiIconHome"></tui-icon> | ||
| A very very long product name | ||
| <tui-badge>Test</tui-badge> | ||
| </span> | ||
| <tui-hosted-dropdown [content]="products"> | ||
| <button | ||
| appearance="secondary" | ||
| iconRight="tuiIconChevronDown" | ||
| tuiButton | ||
| > | ||
| <span>A very very long project</span> | ||
| </button> | ||
| <ng-template #products> | ||
| <tui-data-list size="s"> | ||
| <button tuiOption> | ||
| A very very long project | ||
| <tui-icon | ||
| icon="tuiIconCheck" | ||
| [style.font-size.em]="1" | ||
| [style.margin-left.rem]="0.5" | ||
| ></tui-icon> | ||
| </button> | ||
| <button tuiOption>Something else</button> | ||
| </tui-data-list> | ||
| </ng-template> | ||
| </tui-hosted-dropdown> | ||
| <hr /> | ||
| <button | ||
| appearance="secondary" | ||
| iconLeft="tuiIconPlus" | ||
| tuiButton | ||
| > | ||
| Create | ||
| </button> | ||
| <button | ||
| iconLeft="tuiIconBell" | ||
| tuiIconButton | ||
| > | ||
| Notifications | ||
| <tui-badge-notification></tui-badge-notification> | ||
| </button> | ||
| <button | ||
| iconLeft="tuiIconMoreHorizontal" | ||
| tuiIconButton | ||
| > | ||
| More | ||
| </button> | ||
| <tui-avatar src="AI"></tui-avatar> | ||
| </header> | ||
| <div [style.display]="'flex'"> | ||
| <aside | ||
| [style.height.rem]="25" | ||
| [tuiNavigationAside]="expanded" | ||
| > | ||
| <header> | ||
| <button | ||
| iconLeft="tuiIconHome" | ||
| tuiButton | ||
| > | ||
| <span>A very very long product name</span> | ||
| </button> | ||
| </header> | ||
| <button | ||
| iconLeft="tuiIconSearch" | ||
| tuiButton | ||
| > | ||
| Search | ||
| </button> | ||
| <button | ||
| iconLeft="tuiIconUsers" | ||
| tuiAppearance="flat" | ||
| tuiAppearanceState="hover" | ||
| tuiButton | ||
| > | ||
| Groups | ||
| </button> | ||
| <tui-hosted-dropdown | ||
| [canOpen]="!expanded" | ||
| [content]="dropdown" | ||
| [sided]="true" | ||
| [(open)]="open" | ||
| > | ||
| <button | ||
| iconLeft="tuiIconSettings" | ||
| iconRight="tuiIconChevronDown" | ||
| tuiAppearance="flat" | ||
| tuiButton | ||
| [tuiAppearanceState]="open ? 'hover' : null" | ||
| (click)="submenu = expanded && !submenu" | ||
| > | ||
| Settings | ||
| </button> | ||
| <ng-template #dropdown> | ||
| <tui-data-list size="s"> | ||
| <button tuiOption>Account</button> | ||
| <button tuiOption>Notifications</button> | ||
| <button tuiOption>Privacy</button> | ||
| </tui-data-list> | ||
| </ng-template> | ||
| </tui-hosted-dropdown> | ||
| <tui-expand [expanded]="expanded && submenu"> | ||
| <button tuiButton>Account</button> | ||
| <button tuiButton>Notifications</button> | ||
| <button tuiButton>Privacy</button> | ||
| </tui-expand> | ||
| <button | ||
| iconLeft="tuiIconHeart" | ||
| tuiButton | ||
| > | ||
| <span tuiFade>By default ellipsis is used but you can use fade too</span> | ||
| </button> | ||
| <hr /> | ||
| <button | ||
| iconLeft="tuiIconPlus" | ||
| tuiButton | ||
| > | ||
| Add | ||
| </button> | ||
| <footer> | ||
| <button | ||
| iconLeft="tuiIconStar" | ||
| tuiButton | ||
| > | ||
| Favorites | ||
| </button> | ||
| <button | ||
| tuiButton | ||
| [iconLeft]="expanded ? 'tuiIconChevronLeft' : 'tuiIconChevronRight'" | ||
| (click)="expanded = !expanded" | ||
| > | ||
| Collapse | ||
| </button> | ||
| </footer> | ||
| </aside> | ||
| <main tuiNavigationMain> | ||
| <nav | ||
| tuiNavigationNav | ||
| [style.position]="'sticky'" | ||
| > | ||
| <a routerLink="."> | ||
| <tui-icon icon="tuiIconChevronLeft"></tui-icon> | ||
| Back | ||
| </a> | ||
| / | ||
| <strong>Groups</strong> | ||
| <tui-badge iconLeft="tuiIconLock">Status</tui-badge> | ||
| <hr /> | ||
| <tui-tabs> | ||
| <button tuiTab>Default view</button> | ||
| <button tuiTab>Details</button> | ||
| <button tuiTab>Followers</button> | ||
| </tui-tabs> | ||
| <button | ||
| appearance="secondary" | ||
| tuiButton | ||
| > | ||
| Secondary | ||
| </button> | ||
| <button tuiButton>Primary</button> | ||
| </nav> | ||
| <div | ||
| *tuiRepeatTimes="let index of 10" | ||
| tuiCardLarge | ||
| tuiHeader | ||
| tuiSurface="elevated" | ||
| > | ||
| <h2 tuiTitle> | ||
| Some random content | ||
| <span tuiSubtitle>A subtitle</span> | ||
| </h2> | ||
| </div> | ||
| </main> | ||
| </div> |
15 changes: 15 additions & 0 deletions
15
projects/demo/src/modules/experimental/navigation/examples/1/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import {Component} from '@angular/core'; | ||
| import {changeDetection} from '@demo/emulate/change-detection'; | ||
| import {encapsulation} from '@demo/emulate/encapsulation'; | ||
|
|
||
| @Component({ | ||
| selector: 'tui-navigation-example-1', | ||
| templateUrl: './index.html', | ||
| encapsulation, | ||
| changeDetection, | ||
| }) | ||
| export class TuiNavigationExample1 { | ||
| open = false; | ||
| expanded = false; | ||
| submenu = false; | ||
| } |
105 changes: 105 additions & 0 deletions
105
projects/demo/src/modules/experimental/navigation/examples/2/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <header tuiNavigationHeader> | ||
| <span tuiNavigationLogo> | ||
| Custom color | ||
| <input | ||
| tuiToggle | ||
| type="checkbox" | ||
| [ngModel]="color" | ||
| (ngModelChange)="onColor($event)" | ||
| /> | ||
| </span> | ||
| <tui-hosted-dropdown content="Set --tui-theme-color for :root and theme-color meta tag to the same color"> | ||
| <button | ||
| iconRight="tuiIconChevronDown" | ||
| tuiButton | ||
| > | ||
| How to? | ||
| </button> | ||
| </tui-hosted-dropdown> | ||
| </header> | ||
| <main tuiNavigationMain> | ||
| <a | ||
| appearance="icon" | ||
| iconLeft="tuiIconChevronLeft" | ||
| size="xs" | ||
| tuiButton | ||
| > | ||
| Back | ||
| </a> | ||
| <header tuiHeader> | ||
| <h1 tuiTitle> | ||
| <div tuiNavigationLogo> | ||
| <tui-icon icon="tuiIconGitlab"></tui-icon> | ||
| Research and Development Platform | ||
| <tui-icon | ||
| icon="tuiIconHeart" | ||
| tuiBadge | ||
| ></tui-icon> | ||
| </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="tuiIconUser"></tui-icon> | ||
| Alex Inkin | ||
| </span> | ||
| <span>Edited 6 minutes ago</span> | ||
| <span> | ||
| <tui-icon icon="tuiIconLock"></tui-icon> | ||
| Private | ||
| </span> | ||
| </div> | ||
| </h1> | ||
| <aside tuiAccessories> | ||
| <button | ||
| appearance="secondary" | ||
| tuiButton | ||
| > | ||
| Secondary | ||
| </button> | ||
| <button tuiButton>Primary</button> | ||
| <button | ||
| appearance="secondary" | ||
| iconLeft="tuiIconMoreHorizontal" | ||
| tuiIconButton | ||
| > | ||
| More | ||
| </button> | ||
| </aside> | ||
| </header> | ||
| <nav tuiNavigationNav> | ||
| <tui-tabs> | ||
| <button tuiTab>Default view</button> | ||
| <button tuiTab>Details</button> | ||
| <button tuiTab>Followers</button> | ||
| </tui-tabs> | ||
| <hr /> | ||
| <button tuiButton>Primary</button> | ||
| <button | ||
| appearance="secondary" | ||
| iconLeft="tuiIconMoreHorizontal" | ||
| tuiIconButton | ||
| > | ||
| More | ||
| </button> | ||
| </nav> | ||
| <div | ||
| *tuiRepeatTimes="let index of 10" | ||
| tuiCardLarge | ||
| tuiHeader | ||
| tuiSurface="elevated" | ||
| > | ||
| <h2 tuiTitle> | ||
| Some random content | ||
| <span tuiSubtitle>A subtitle</span> | ||
| </h2> | ||
| </div> | ||
| </main> |
29 changes: 29 additions & 0 deletions
29
projects/demo/src/modules/experimental/navigation/examples/2/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import {DOCUMENT} from '@angular/common'; | ||
| import {Component, Inject} from '@angular/core'; | ||
| import {changeDetection} from '@demo/emulate/change-detection'; | ||
| import {encapsulation} from '@demo/emulate/encapsulation'; | ||
|
|
||
| @Component({ | ||
| selector: 'tui-navigation-example-2', | ||
| templateUrl: './index.html', | ||
| encapsulation, | ||
| changeDetection, | ||
| }) | ||
| export class TuiNavigationExample2 { | ||
| color = false; | ||
|
|
||
| readonly initial = | ||
| this.doc.head | ||
| .querySelector('meta[name="theme-color"]') | ||
| ?.getAttribute('content') || ''; | ||
|
|
||
| constructor(@Inject(DOCUMENT) private readonly doc: Document) {} | ||
|
|
||
| onColor(color: boolean): void { | ||
| this.color = color; | ||
| this.doc.body.style.setProperty('--tui-theme-color', color ? 'purple' : 'black'); | ||
| this.doc.head | ||
| .querySelector('meta[name="theme-color"]') | ||
| ?.setAttribute('content', color ? 'purple' : this.initial); | ||
| } | ||
| } |
Oops, something went wrong.