forked from ng-bootstrap/ng-bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
demo(scrollspy): add initial scrollspy demos
- Loading branch information
1 parent
2c56e1e
commit 7af21da
Showing
16 changed files
with
585 additions
and
1 deletion.
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
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
25 changes: 25 additions & 0 deletions
25
demo/src/app/components/scrollspy/demos/basic/scrollspy-basic.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,25 @@ | ||
| <div ngbScrollSpy #spy="ngbScrollSpy" class="bg-light p-3 rounded-2 mb-3" style="height: 200px"> | ||
| <h4 ngbScrollSpyFragment="one">First heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master | ||
| cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh | ||
| dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum | ||
| iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="two">Second heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master | ||
| cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh | ||
| dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum | ||
| iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="three">Third heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master | ||
| cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh | ||
| dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum | ||
| iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| </div> | ||
|
|
||
| <pre>Active: {{ spy.active }}</pre> |
12 changes: 12 additions & 0 deletions
12
demo/src/app/components/scrollspy/demos/basic/scrollspy-basic.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,12 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { NgbScrollSpyModule } from '@ng-bootstrap/ng-bootstrap'; | ||
| import { FormsModule } from '@angular/forms'; | ||
| import { AsyncPipe } from '@angular/common'; | ||
|
|
||
| @Component({ | ||
| selector: 'ngbd-scrollspy-basic', | ||
| standalone: true, | ||
| imports: [NgbScrollSpyModule, FormsModule, AsyncPipe], | ||
| templateUrl: './scrollspy-basic.html', | ||
| }) | ||
| export class NgbdScrollSpyBasic {} |
60 changes: 60 additions & 0 deletions
60
demo/src/app/components/scrollspy/demos/items/scrollspy-items.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,60 @@ | ||
| <p>Shows the example of <code>NgbScrollSpyItem</code> usage to highlight items and handle scrolling</p> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-4"> | ||
| <div id="list-example" class="list-group"> | ||
| <button type="button" class="list-group-item list-group-item-action" [ngbScrollSpyItem]="[spy, 'items-1']"> | ||
| 1 - button | ||
| </button> | ||
| <button type="button" class="list-group-item list-group-item-action" [ngbScrollSpyItem]="spy" fragment="items-2"> | ||
| 2 - button | ||
| </button> | ||
| <a type="button" class="list-group-item list-group-item-action" [ngbScrollSpyItem]="spy" fragment="items-3"> | ||
| 3 - link no href | ||
| </a> | ||
| <a | ||
| class="list-group-item list-group-item-action" | ||
| href | ||
| [class.active]="spy.active === 'items-4'" | ||
| (click)="spy.scrollTo('items-4'); $event.preventDefault();" | ||
| > | ||
| 4 - link no directive | ||
| </a> | ||
| <a routerLink="." class="list-group-item list-group-item-action" [ngbScrollSpyItem]="spy" fragment="items"> | ||
| 5 - routerLink example | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="col-8"> | ||
| <div ngbScrollSpy #spy="ngbScrollSpy" rootMargin="16px" class="bg-light p-3 rounded-2 mb-3" style="height: 200px"> | ||
| <h4 ngbScrollSpyFragment="items-1">First heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="items-2">Second heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="items-3">Third heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="items-4">Fourth heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> |
12 changes: 12 additions & 0 deletions
12
demo/src/app/components/scrollspy/demos/items/scrollspy-items.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,12 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { NgbScrollSpyModule } from '@ng-bootstrap/ng-bootstrap'; | ||
| import { FormsModule } from '@angular/forms'; | ||
| import { RouterLink } from '@angular/router'; | ||
|
|
||
| @Component({ | ||
| selector: 'ngbd-scrollspy-items', | ||
| standalone: true, | ||
| imports: [NgbScrollSpyModule, FormsModule, RouterLink], | ||
| templateUrl: './scrollspy-items.html', | ||
| }) | ||
| export class NgbdScrollSpyItems {} |
58 changes: 58 additions & 0 deletions
58
demo/src/app/components/scrollspy/demos/navbar/scrollspy-navbar.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,58 @@ | ||
| <nav class="navbar bg-light px-3 mb-3"> | ||
| <span class="navbar-brand">Navbar</span> | ||
| <ul class="nav nav-pills" [ngbScrollSpyMenu]="s"> | ||
| <li class="nav-item"> | ||
| <button class="nav-link" ngbScrollSpyItem="basic-1">First</button> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <button class="nav-link" ngbScrollSpyItem="basic-2">Second</button> | ||
| </li> | ||
| <li ngbDropdown class="nav-item"> | ||
| <button ngbDropdownToggle class="nav-link" ngbScrollSpyItem="basic-p1">Dropdown</button> | ||
| <ul ngbDropdownMenu> | ||
| <li><button ngbDropdownItem ngbScrollSpyItem="basic-3" parent="basic-p1">Third</button></li> | ||
| <li><button ngbDropdownItem ngbScrollSpyItem="basic-4" parent="basic-p1">Fourth</button></li> | ||
| <li><hr class="dropdown-divider" /></li> | ||
| <li><button ngbDropdownItem ngbScrollSpyItem="basic-5" parent="basic-p1">Fifth</button></li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <div ngbScrollSpy #s="ngbScrollSpy" rootMargin="0px 0px -40%" class="bg-light p-3 rounded-2 mb-3" style="height: 200px"> | ||
| <h4 ngbScrollSpyFragment="basic-1">First heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master | ||
| cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh | ||
| dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum | ||
| iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="basic-2">Second heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master | ||
| cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh | ||
| dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum | ||
| iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="basic-3">Third heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master | ||
| cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh | ||
| dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum | ||
| iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="basic-4">Fourth heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master | ||
| cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh | ||
| dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum | ||
| iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="basic-5">Fifth heading</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master | ||
| cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh | ||
| dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum | ||
| iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| </div> |
10 changes: 10 additions & 0 deletions
10
demo/src/app/components/scrollspy/demos/navbar/scrollspy-navbar.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,10 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { NgbDropdownModule, NgbScrollSpyModule } from '@ng-bootstrap/ng-bootstrap'; | ||
|
|
||
| @Component({ | ||
| selector: 'ngbd-scrollspy-navbar', | ||
| standalone: true, | ||
| imports: [NgbScrollSpyModule, NgbDropdownModule], | ||
| templateUrl: './scrollspy-navbar.html', | ||
| }) | ||
| export class NgbdScrollSpyNavbar {} |
73 changes: 73 additions & 0 deletions
73
demo/src/app/components/scrollspy/demos/nested/scrollspy-nested.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,73 @@ | ||
| <div class="row"> | ||
| <div class="col-4"> | ||
| <nav [ngbScrollSpyMenu]="spy" class="h-100 flex-column align-items-stretch pe-4 border-end"> | ||
| <nav class="nav nav-pills flex-column"> | ||
| <a role="button" class="nav-link" ngbScrollSpyItem="nested-1">Item 1</a> | ||
| <nav class="nav nav-pills flex-column"> | ||
| <a role="button" class="nav-link ms-3 my-1" ngbScrollSpyItem="nested-1-1" parent="nested-1">Item 1-1</a> | ||
| <a role="button" class="nav-link ms-3 my-1" ngbScrollSpyItem="nested-1-2" parent="nested-1">Item 1-2</a> | ||
| </nav> | ||
| <a role="button" class="nav-link" ngbScrollSpyItem="nested-2">Item 2</a> | ||
| <a role="button" class="nav-link" ngbScrollSpyItem="nested-3">Item 3</a> | ||
| <nav class="nav nav-pills flex-column"> | ||
| <a role="button" class="nav-link ms-3 my-1" ngbScrollSpyItem="nested-3-1" parent="nested-3">Item 3-1</a> | ||
| <a role="button" class="nav-link ms-3 my-1" ngbScrollSpyItem="nested-3-2" parent="nested-3">Item 3-2</a> | ||
| </nav> | ||
| </nav> | ||
| </nav> | ||
| </div> | ||
|
|
||
| <div class="col-8"> | ||
| <div ngbScrollSpy #spy="ngbScrollSpy" rootMargin="16px" class="bg-light p-3 rounded-2 mb-3" style="height: 300px"> | ||
| <h4 ngbScrollSpyFragment="nested-1">Item 1</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h5 ngbScrollSpyFragment="nested-1-1">Item 1-1</h5> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h5 ngbScrollSpyFragment="nested-1-2">Item 1-2</h5> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="nested-2">Item 2</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h4 ngbScrollSpyFragment="nested-3">Item 3</h4> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h5 ngbScrollSpyFragment="nested-3-1">Item 3-1</h5> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| <h5 ngbScrollSpyFragment="nested-3-2">Item 3-2</h5> | ||
| <p> | ||
| Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth | ||
| master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro | ||
| keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat | ||
| salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> |
10 changes: 10 additions & 0 deletions
10
demo/src/app/components/scrollspy/demos/nested/scrollspy-nested.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,10 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { NgbScrollSpyModule } from '@ng-bootstrap/ng-bootstrap'; | ||
|
|
||
| @Component({ | ||
| selector: 'ngbd-scrollspy-nested', | ||
| standalone: true, | ||
| imports: [NgbScrollSpyModule], | ||
| templateUrl: './scrollspy-nested.html', | ||
| }) | ||
| export class NgbdScrollSpyNested {} |
Oops, something went wrong.