-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(docs): update portal examples (#184)
- Loading branch information
Showing
11 changed files
with
197 additions
and
83 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
...opovers/src/app/pages/documentation/page-core/page-portal/examples/1/index.component.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,7 @@ | ||
| <div #div class="div"> | ||
| <p>The portal content is below</p> | ||
| </div> | ||
|
|
||
| <ngx-portal [bindTo]="div"> | ||
| <strong>I am inside the div!</strong> | ||
| </ngx-portal> |
5 changes: 5 additions & 0 deletions
5
...opovers/src/app/pages/documentation/page-core/page-portal/examples/1/index.component.scss
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,5 @@ | ||
| .div { | ||
| background: theme('colors.primary'); | ||
| color: theme('colors.primary-content'); | ||
| padding: theme('padding.2'); | ||
| } |
21 changes: 21 additions & 0 deletions
21
...vers/src/app/pages/documentation/page-core/page-portal/examples/1/index.component.spec.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,21 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { IndexComponent } from './index.component'; | ||
|
|
||
| describe('IndexComponent', () => { | ||
| let component: IndexComponent; | ||
| let fixture: ComponentFixture<IndexComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [IndexComponent], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(IndexComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
13 changes: 13 additions & 0 deletions
13
...-popovers/src/app/pages/documentation/page-core/page-portal/examples/1/index.component.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,13 @@ | ||
| import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { PortalComponent } from "@ngx-popovers/core"; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| imports: [CommonModule, PortalComponent], | ||
| templateUrl: './index.component.html', | ||
| styleUrl: './index.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class IndexComponent { | ||
| } |
17 changes: 17 additions & 0 deletions
17
...opovers/src/app/pages/documentation/page-core/page-portal/examples/2/index.component.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,17 @@ | ||
| <pre>bindTo: {{ selector() }}</pre> | ||
|
|
||
| <div class="grid grid-cols-2 gap-2"> | ||
| @for (sect of sections; track sect) { | ||
| <section [id]="sect" class="section" (click)="section.set(sect)"> | ||
| <label class="text-center">{{ sect }}</label> | ||
| <div class="flex-1"></div> | ||
| <div class="section-portal"></div> | ||
| </section> | ||
| } | ||
| </div> | ||
|
|
||
| @if (section()) { | ||
| <ngx-portal [bindTo]="selector()"> | ||
| <div class="p-4 bg-primary text-primary-content rounded-xl">Portal!</div> | ||
| </ngx-portal> | ||
| } |
28 changes: 28 additions & 0 deletions
28
...opovers/src/app/pages/documentation/page-core/page-portal/examples/2/index.component.scss
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,28 @@ | ||
| :host { | ||
| display: block; | ||
| padding: theme('padding.4') 0; | ||
| } | ||
|
|
||
| .section { | ||
| height: 140px; | ||
| min-width: 100px; | ||
| overflow: hidden; | ||
| padding: theme('padding.2'); | ||
| flex: theme('flex.1'); | ||
| border: theme('borderWidth.2') solid theme('colors.base-200'); | ||
| border-radius: theme('borderRadius.lg'); | ||
| transition: .4s ease background; | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| &:hover { | ||
| background: theme('colors.base-300'); | ||
| } | ||
|
|
||
| &-portal { | ||
| flex: theme('flex.1'); | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| } |
21 changes: 21 additions & 0 deletions
21
...vers/src/app/pages/documentation/page-core/page-portal/examples/2/index.component.spec.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,21 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { IndexComponent } from './index.component'; | ||
|
|
||
| describe('IndexComponent', () => { | ||
| let component: IndexComponent; | ||
| let fixture: ComponentFixture<IndexComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [IndexComponent], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(IndexComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
23 changes: 23 additions & 0 deletions
23
...-popovers/src/app/pages/documentation/page-core/page-portal/examples/2/index.component.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,23 @@ | ||
| import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { PortalComponent } from "@ngx-popovers/core"; | ||
|
|
||
| @Component({ | ||
| selector: 'demo-index', | ||
| standalone: true, | ||
| imports: [CommonModule, PortalComponent], | ||
| templateUrl: './index.component.html', | ||
| styleUrl: './index.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class IndexComponent { | ||
| sections = [ | ||
| 'sect1', | ||
| 'sect2', | ||
| 'sect3', | ||
| 'sect4' | ||
| ]; | ||
|
|
||
| section = signal(this.sections[0]); | ||
| selector = computed(() => this.section() ? `#${this.section()} .section-portal` : ''); | ||
| } |
72 changes: 33 additions & 39 deletions
72
...ngx-popovers/src/app/pages/documentation/page-core/page-portal/page-portal.component.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 |
|---|---|---|
| @@ -1,53 +1,47 @@ | ||
| <div class="page"> | ||
| <page-title description="The Portal component displays the content on the body by default or another DOM element." /> | ||
| <page-title | ||
| description="The Portal component displays the content on the body by default or another DOM element." | ||
| /> | ||
|
|
||
| <section class="py-4"> | ||
| <h2 class="text-4xl mb-4 font-bold">Usage</h2> | ||
|
|
||
| <p class="text-xl">Default usage:</p> | ||
| <p> | ||
| Pop-up menus and notifications often need to appear above all other elements | ||
| and should not depend on the container in which they were created. | ||
| <strong>NgxPortal</strong> is used in all component based on the | ||
| <a routerLink="../floating">ngxFloating</a> | ||
| component, such as tooltips and popovers. | ||
| </p> | ||
|
|
||
| <div class="my-4"> | ||
| <highlight lang="typescript" [code]="portalUsageHtml" /> | ||
| </div> | ||
| <div class="divider"></div> | ||
|
|
||
| <p class="text-xl">Usage with bindTo</p> | ||
| <section class="py-4"> | ||
| <sub-title>Usage</sub-title> | ||
| <p class="text-xl">Default usage:</p> | ||
|
|
||
| <div class="my-4"> | ||
| <highlight lang="html" [code]="portalUsageWithBindHtml" /> | ||
| </div> | ||
| <demo-code-example-tabs | ||
| [html]="example1.HTML | async" | ||
| [ts]="example1.TS | async" | ||
| [scss]="example1.SCSS | async" | ||
| > | ||
| <ng-container *ngComponentOutlet="example1.EXAMPLE | async" /> | ||
| </demo-code-example-tabs> | ||
|
|
||
| <div class="divider"></div> | ||
|
|
||
| <h2 class="text-4xl mb-4 font-bold">Example</h2> | ||
| <sub-title>Example</sub-title> | ||
|
|
||
| <p> | ||
| You can display portal content into any DOM element. | ||
| Select any container for demonstration | ||
| You can display portal content into any DOM element. Select any container | ||
| for demonstration | ||
| </p> | ||
|
|
||
| <br> | ||
| <pre>bindTo: {{ selector() }}</pre> | ||
|
|
||
| <div class="flex gap-2 py-4"> | ||
| @for (sect of sections; track sect) { | ||
| <section | ||
| [id]="sect" | ||
| class="flex-1 h-[120px] border-2 border-dashed border-primary rounded flex flex-col overflow-hidden" | ||
| > | ||
| <button class="btn btn-sm" (click)="section.set(sect)">{{ sect }}</button> | ||
| <div class="flex-1 flex items-center justify-center"></div> | ||
| </section> | ||
| } | ||
|
|
||
| <br> | ||
|
|
||
| @if (section()) { | ||
| <ngx-portal | ||
| [bindTo]="selector()" | ||
| > | ||
| <div class="p-4 bg-primary">Portal!</div> | ||
| </ngx-portal> | ||
| } | ||
| </div> | ||
| <br /> | ||
|
|
||
| <demo-code-example-tabs | ||
| [html]="example2.HTML | async" | ||
| [ts]="example2.TS | async" | ||
| [scss]="example2.SCSS | async" | ||
| > | ||
| <ng-container *ngComponentOutlet="example2.EXAMPLE | async" /> | ||
| </demo-code-example-tabs> | ||
| </section> | ||
| </div> |
70 changes: 27 additions & 43 deletions
70
apps/ngx-popovers/src/app/pages/documentation/page-core/page-portal/page-portal.component.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 |
|---|---|---|
| @@ -1,56 +1,40 @@ | ||
| import { AfterViewInit, ChangeDetectionStrategy, Component, computed, signal } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { TitleComponent } from '@demo/pages/documentation/ui/components/title/title.component'; | ||
| import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
| import { RouterLink } from '@angular/router'; | ||
| import { HighlightComponent } from '@demo/core/highlight'; | ||
| import { TitleComponent } from '@demo/pages/documentation/ui/components'; | ||
| import { PortalComponent } from '@ngx-popovers/core'; | ||
|
|
||
| const portalUsageHtml = ` | ||
| import { PortalComponent } from '@ngx-popovers/core'; | ||
| @Component({ | ||
| selector: 'ngx-portal-example', | ||
| standalone: true, | ||
| imports: [PortalComponent], | ||
| template: \` | ||
| <ngx-portal> | ||
| <p>It will be displayed as the last child of the body</p> | ||
| </ngx-portal> | ||
| \`, | ||
| }) | ||
| `.trim(); | ||
|
|
||
| const portalUsageWithBindHtml = ` | ||
| <div #element> | ||
| <p>Element</p> | ||
| </div> | ||
| <ngx-portal [bindTo]="element"> | ||
| <p>It will be displayed as the last child of the element</p> | ||
| </ngx-portal> | ||
| `.trim(); | ||
| import { CodeExampleTabsComponent } from "../../ui/components/code-example-tabs/code-example-tabs.component"; | ||
| import { SubTitleComponent } from "../../ui/components/page-title/sub-title.component"; | ||
|
|
||
| @Component({ | ||
| selector: 'ngx-popovers-page-portal', | ||
| standalone: true, | ||
| imports: [CommonModule, TitleComponent, HighlightComponent, PortalComponent], | ||
| imports: [ | ||
| CommonModule, | ||
| TitleComponent, | ||
| HighlightComponent, | ||
| PortalComponent, | ||
| CodeExampleTabsComponent, | ||
| SubTitleComponent, | ||
| RouterLink | ||
| ], | ||
| templateUrl: './page-portal.component.html', | ||
| styleUrl: './page-portal.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class PagePortalComponent implements AfterViewInit { | ||
| portalUsageHtml = portalUsageHtml; | ||
| portalUsageWithBindHtml = portalUsageWithBindHtml; | ||
|
|
||
| sections = [ | ||
| 'sect1', | ||
| 'sect2', | ||
| 'sect3', | ||
| 'sect4' | ||
| ] as const; | ||
| section = signal(''); | ||
| selector = computed(() => this.section() ? `#${this.section()} div` : ''); | ||
| export class PagePortalComponent { | ||
| example1 = { | ||
| EXAMPLE: import('./examples/1/index.component').then(m => m.IndexComponent), | ||
| HTML: import('./examples/1/index.component.html?raw').then(m => m.default), | ||
| TS: import('./examples/1/index.component.ts?raw').then(m => m.default), | ||
| SCSS: import('./examples/1/index.component.scss?raw').then(m => m.default), | ||
| }; | ||
|
|
||
| ngAfterViewInit() { | ||
| this.section.set(this.sections[0]); | ||
| } | ||
| example2 = { | ||
| EXAMPLE: import('./examples/2/index.component').then(m => m.IndexComponent), | ||
| HTML: import('./examples/2/index.component.html?raw').then(m => m.default), | ||
| TS: import('./examples/2/index.component.ts?raw').then(m => m.default), | ||
| SCSS: import('./examples/2/index.component.scss?raw').then(m => m.default), | ||
| }; | ||
| } |
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