angula的自定义底部弹出提示组件

angula的自定义底部弹出提示组件
插件名称 bottom-sheet
发布时间 2020年4月13日
插件作者 rahul051296

在AngularJS Web应用程序上轻松实现底部表格。

特征:

  • 光明与黑暗的主题
  • 自定义触发按钮
  • 自定义字体/背景色

如何使用它:

1.在您的Angular项目中安装并导入Bottom Sheet Component。

# NPM
$ npm install angular-bottom-sheet --save
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularBottomSheetModule } from 'angular-bottom-sheet';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularBottomSheetModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.将底表和一个切换按钮添加到模板中。

<button (click)="openBottomSheet()"></button>
<angular-bottom-sheet [options]="options" #bottomSheet>
  Any Content Here
</angular-bottom-sheet>

3.声明组件中的选项。

import { Component, ViewChild } from '@angular/core';
import { AngularBottomSheetComponent, AngularBottomSheetConfig } from 'angular-bottom-sheet';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('bottomSheet') bottomSheet: AngularBottomSheetComponent;
  options: AngularBottomSheetConfig;
  openBottomSheet() {
    this.bottomSheet.open();
  }
  ngOnInit(){
    this.options = {
      title:"Angular Bottom Sheet",
      backgroundColor: "#ffffff", 
      fontColor: "#363636",
      enableCloseButton: true,
      closeButtonTitle: "close",
      darkTheme: true
    }
  }
}

4.切换底页。

// 打开
this.bottomSheet.open();
// 关闭
this.bottomSheet.close();
// 切换
this.bottomSheet.toggle();