Skip to content

Commit 4dc1864

Browse files
committed
docs(ScrollSpy): Update example in README.md
1 parent acfd1ee commit 4dc1864

File tree

1 file changed

+40
-7
lines changed

1 file changed

+40
-7
lines changed

README.md

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,29 @@
22
[![Build Status][travis-badge]][travis-badge-url]
33
[![Coverage Status][coveralls-badge]][coveralls-badge-url]
44

5-
A simple lightweight library for [Angular (2/4+)][angular] which automatically updates links to indicate the currently active section in the viewport.
5+
A simple lightweight library for [Angular (2/4+)][angular] which automatically updates links to indicate the currently active section in the viewport. Requires [Angular Inviewport][angular-inviewport] to be installed as well.
66

77
This is a simple library for [Angular][angular], implemented in the [Angular Package Format v4.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx).
88

99

1010
## Install
1111

12-
`npm i @thisissoon/angular-scrollspy --save`
12+
`npm i @thisissoon/{angular-scrollspy, angular-inviewport} --save`
1313

1414
`app.module.ts`
1515
```ts
16-
import { ScrollSpyModule } from '@thisissoon/angular-scrollspy';
16+
import { ScrollSpyModule, WindowRef } from '@thisissoon/angular-scrollspy';
17+
18+
// Provide window object for browser and a suitable replacement
19+
// on other platforms
20+
const getWindow = () => window;
21+
const providers: Provider[] = [
22+
{ provide: WindowRef, useFactory: (getWindow) },
23+
];
1724

1825
@NgModule({
1926
imports: [
20-
ScrollSpyModule
27+
ScrollSpyModule.forRoot(providers)
2128
]
2229
})
2330
export class AppModule { }
@@ -26,16 +33,42 @@ export class AppModule { }
2633

2734
## Example
2835

36+
A working example can be forund in the [src/demo](https://github.com/thisissoon/angular-scrollspy/tree/master/src/demo) folder.
37+
2938
`app.component.html`
3039

3140
```html
32-
<p class="foo" snScrollSpy>
33-
...
34-
</p>
41+
<ul role="navigation" snScrollSpy id="foo">
42+
<li><a snScrollSpyItem for="foo" href="#section1">Section 1</a></li>
43+
<li><a snScrollSpyItem for="foo" href="#section2">Section 2</a></li>
44+
<li><a snScrollSpyItem for="foo" href="#section3">Section 3</a></li>
45+
<li><a snScrollSpyItem for="foo" href="#section4">Section 4</a></li>
46+
</ul>
47+
48+
<sn-scroll-spy-section id="section1" for="foo">content goes here</sn-scroll-spy-section>
49+
<sn-scroll-spy-section id="section2" for="foo">content goes here</sn-scroll-spy-section>
50+
<sn-scroll-spy-section id="section3" for="foo">content goes here</sn-scroll-spy-section>
51+
<sn-scroll-spy-section id="section4" for="foo">content goes here</sn-scroll-spy-section>
3552
```
3653

54+
`app.component.css`
55+
56+
```css
57+
58+
a {
59+
color: blue;
60+
transition: color .2s ease-in-out;
61+
}
62+
63+
a.active {
64+
color: darkblue;
65+
}
66+
```
67+
68+
3769
[travis-badge]: https://travis-ci.org/thisissoon/angular-scrollspy.svg?branch=master
3870
[travis-badge-url]: https://travis-ci.org/thisissoon/angular-scrollspy
3971
[coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-scrollspy/badge.svg?branch=master
4072
[coveralls-badge-url]: https://coveralls.io/github/thisissoon/angular-scrollspy?branch=master
4173
[angular]: https://angular.io/
74+
[angular-inviewport]: https://github.com/thisissoon/angular-inviewport/

0 commit comments

Comments
 (0)