swipe-bottom-sheet
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.5 • Public • Published

    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 });
      }
    }

    Keywords

    none

    Install

    npm i swipe-bottom-sheet

    DownloadsWeekly Downloads

    12

    Version

    0.2.5

    License

    ISC

    Unpacked Size

    58 kB

    Total Files

    29

    Last publish

    Collaborators

    • joeflateau