swipe-bottom-sheet is a component that I created to create mobile web bottom sheets. It is able to be dismissed by swiping down, maximized by swiping up and implements a Promise interface for being used to capture data. There is an Angular example provided but this can be used with other frameworks as well.

README.md

swipe-bottom-sheet

Demo Stackblitz

Usage in Angular

TLDR:

  • Install from npm
  • Inject the module into app module
  • Import the scss
  • Set the root view container ref to the app component's view container
  • Open sheets

Install from npm

npm i swipe-bottom-sheet

Import the BottomSheetModule into your app module

import { BottomSheetModule } from "swipe-bottom-sheet/angular";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BottomSheetModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: []
})
export class AppModule {}

Import the module's scss

@import "~swipe-bottom-sheet/style.scss";

Inject the BrowserSheetProvider into your app component and set the bottomSheet's rootVcRef property

import { BottomSheetProvider } from "swipe-bottom-sheet/angular";

@Component({
  selector: "app-root",
  templateUrl: "app.html"
})
export class AppComponent {
  constructor(
    private bottomSheet: BottomSheetProvider,
    vcRef: ViewContainerRef
  ) {
    // only set this once and do so in the app component's constructor
    bottomSheet.rootVcRef = vcRef;
  }
}

Open a bottom sheet using a TemplateRef

import { BottomSheetProvider } from "swipe-bottom-sheet/angular";

@Component({
  selector: "app-component",
  templateUrl: "component.html"
})
export class MyComponent {
  constructor(private bottomSheet: BottomSheetProvider) {}

  async openSheet<T>(content: TemplateRef<T>) {
    const value = await this.bottomSheet.show(content, {
      title: "Sheet Title",
      stops: [270]
    });
    console.log({ value });
  }
}
<button type="button" (click)="openSheet(sheetTemplate)">
  Open Template
</button>

<ng-template #sheetTemplate let-context>
  <ul class="sheet-list">
    <li class="sheet-list-item" (click)="context.dismiss('value')">
      Dismiss with value
    </li>
  </ul>
</ng-template>

Open a bottom sheet using a Component

Write the Component

Have BottomSheetContext injected and use that to control the sheet

import { BottomSheetContext } from "swipe-bottom-sheet/angular";

@Component({
  selector: "app-example-component",
  template: `
    <ul class="sheet-list">
      <li
        class="sheet-list-item"
        (click)="context.dismiss('dismissed with value from component')"
      >
        Dismiss with value
      </li>
    </ul>
  `
})
export class ExampleComponent {
  constructor(public context: BottomSheetContext) {}
}

Open the sheet with a reference to your component

<button type="button" (click)="openSheet()">
  Open Component
</button>
import { BottomSheetProvider } from "swipe-bottom-sheet/angular";
import { ExampleComponent } from "./example-sheet-component";

@Component({
  selector: "app-component",
  templateUrl: "component.html",
  styles: []
})
export class MyComponent {
  constructor(private bottomSheet: BottomSheetProvider) {}

  async openSheet<T>() {
    const value = await this.bottomSheet.show(ExampleComponent, {
      title: "Sheet Title",
      stops: [270]
    });
    console.log({ value });
  }
}