Angular的Material Design返回顶部按钮– ngx-scrolltop

Angular的Material Design返回顶部按钮– ngx-scrolltop
插件名称 ngx-scrolltop
发布时间 2020年4月12日
插件作者 Bartholomej

ngx-scrolltop是一个Angular组件/指令,用于创建“材质设计”,并具有从上到下的启发按钮,当单击/轻击时,该页面可平滑地滚动回到顶部。

如何使用它:

1.安装ngx-scrolltop并将其导入到Angular模块中。

# Yarn
$ yarn add ngx-scrolltop

# NPM
$ npm install ngx-scrolltop --save
import { NgxScrollTopModule } from 'ngx-scrolltop';
@NgModule({
  imports: [
    ...
    NgxScrollTopModule
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

2.使用ngx-scrolltop作为组件或指令:

// 作为一个组成部分
<ngx-scrolltop></ngx-scrolltop>
// 作为指示
<span ngxScrollTop>
  ↑ 返回顶部 ↑
</span>

3.可能的选项来配置“返回页首”按钮。

// 作为一个组成部分
<ngx-scrolltop
  [size]="40"
  backgroundColor="#33691e"
  symbolColor="#fff"
  symbol="↑"
  mode="smart" // or 'classic'
  position="left" // or 'right'
  theme="pink" // 'black', 'white', 'gray', 'brown', 'deeporange', 'orange', 'yellow', 'green', 'blue', 'purple', 'deeppurple', 'pink', 'red'
>
</ngx-scrolltop>
// 作为指示
<span ngxScrollTop [ngxScrollTopMode]="'smart'">
  ↑ 返回顶部 ↑
</span>