1.2.5 • Published 5 years ago

angular-bottom-sheet v1.2.5

Weekly downloads
15
License
MIT
Repository
github
Last release
5 years ago

Angular Bottom Sheet

Angular Bottom Sheet Demo

Requires Angular 7.x

Install

npm i angular-bottom-sheet

Usage

First, import AngularBottomSheetModule to your module

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 { }

Add the following component tag in you template.

<button (click)="openBottomSheet()"></button><!-- Toggle bottom sheet -->

<angular-bottom-sheet [options]="options" #bottomSheet>
    <!-- Your content goes here -->
</angular-bottom-sheet>

Declare the options in your component where you want to consume the bottom sheet component.

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" 
    }
  }
}

Screenshot

Screenshot1

Screenshot2

Settings

The following list of settings are supported by the component. Configure the options to meet your requirement.

SettingTypeDescriptionDefault Value
titleStringTo set the title for the bottom sheet component.""
backgroundColorStringTo set the background color of the bottom sheet component."#fff"
fontColorStringTo set the font color of the bottom sheet component."#363636"
enableCloseButtonBooleanTo enable the close button in bottom sheet component.false
closeButtonTitleStringTo set the value for close button in bottom sheet component."Close"
darkThemeBooleanTo enable the dark theme in the bottom sheet component.false

Events

  • open() - opens the bottom sheet component. Example : this.bottomSheet.open()"
  • close() - closes the bottom sheet component. Example : this.bottomSheet.close()"
  • toggle() - toggles the bottom sheet component between open and close states. Example : this.bottomSheet.toggle()"