bottom-sheet-angular v0.0.2

Angular Bottom Sheet Component

A highly customizable bottom sheet component for Angular applications that remains always visible on screen. The component lets users drag to expand or contract the sheet between a minimum (60% of the viewport) and a maximum (90% of the viewport) height. Built as a standalone component, it’s compatible with Angular 15 and above.

Features

• Always Visible: The bottom sheet is rendered in place (using translateY(0)), so it never slides completely off–screen.
• Draggable: Users can drag upward to expand (up to 90% of viewport height) and drag downward to contract (down to 60%).
• Standalone Component: No need to declare it in an NgModule if you’re using Angular’s standalone component APIs.
• Angular 15+ Compatible: The package is designed to work with Angular version 15 and any later version.
• Customizable: Easily override the default CSS to match your app’s look and feel.

Installation

Install the package via npm (replace bottom-sheet with your package name or scoped package name):

npm install bottom-sheet

// app.component.ts
import { Component } from '@angular/core';
import { BottomSheetComponent } from 'bottom-sheet';

@Component({
  selector: 'app-root',
  template: `
    <bottom-sheet>
      <!-- Your content goes here -->
      <p>This is inside the bottom sheet!</p>
    </bottom-sheet>
  `,
  standalone: true,
  imports: [BottomSheetComponent]
})
export class AppComponent {}