https://github.com/haoliangwu/ngx-anchor
angular 4+ custom anchor components
https://github.com/haoliangwu/ngx-anchor
anchors angular ngx
Last synced: 5 months ago
JSON representation
angular 4+ custom anchor components
- Host: GitHub
- URL: https://github.com/haoliangwu/ngx-anchor
- Owner: haoliangwu
- Created: 2018-01-25T02:06:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-29T07:56:52.000Z (over 3 years ago)
- Last Synced: 2024-08-09T03:10:44.581Z (almost 2 years ago)
- Topics: anchors, angular, ngx
- Language: TypeScript
- Homepage: https://haoliangwu.github.io/ngx-anchor/
- Size: 1.2 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ngx-anchor
angular 4+ custom anchor components. [DEMO][demo]
## todos
* [x] custom anchor mark directive
* [x] build-in anchor navigator
* [x] mult anchor level support
* [x] custom animation options
* [ ] ember layout support
* [x] public navigator service
## installing and usage
> ``npm install ngx-anchor --save``
### load module in app module (with or without global configuration)
```
// without configuration
imports: [
...
NgxAnchorModule.forRoot(),
...
]
// with configuration
imports: [
...
NgxAnchorModule.forRoot({
duration: 1000,
step: 10,
sensitivity: 36
}),
...
]
```
### configuration
* ``duration``(number): scroll animation total duration distance
* ``step``(number): the step per requestAnimationFrame
* ``sensitivity``(number): the offset which affects anchor navigator auto-active when trigger scroll events, default is 12px
* ``timeFunc``: scroll animation time function used, signature is
```
funciton timeFunc(step: number, start: number, change: number, duration: number) => number
```
## directives
### ``ngxAnchor``
custom anchor mark
* ``ngxAnchor``(string): anchor custom id
example:
```
main title{{foo}}
```
### ``ngxWithAnchor``
parent anchor mark
* ``ngxWithAnchor``(string): parent anchor id
example:
```
main title{{foo}}
sub main title{{bar}}
```
## components
### ``ngx-anchor-nav``
build-in anchor navigator
* ``anchorTpl``(TemplateRef)
example:
```
{{index}}
```
## services
### AnchorService
#### property
* ``anchors``( { [id: string]: anchor: Anchor} ): all regisitry custom anchor instance
* ``activeAnchor``(Anchor): current active anchor instance
* ``scrollEvents``(Observable): current active anchor Observable
#### method
```
anchorFactory(el: HTMLElement, constraint: AnchorRelConstriant): Anchor
```
anchor instance factory with el
```
get(id: string): Anchor
```
retrive anchor instance by id
```
register(el: HTMLElement, constraint: AnchorRelConstriant)
```
register el as anchor instance
```
scrollTo(anchor: Anchor | string, scrollOptions?: AnchorScrollConfig)
```
scroll to some anchor instance with custom animation options
```
attachListner(el: HTMLElement | Window = window): Observable
```
attach scroll listner to container element, default is ``window``
[demo]: http://littlelyon.com/ngx-anchor/