iOS Style Bottom Sheet In Vanilla JavaScript

A lightweight and easy-to-use solution for creating iOS-style bottom sheets that slide up from the bottom of the screen and display content to the user.

How to use it:

1. Import the Bottom Sheet component.

import { BottomSheet } from "./index.js";

2. Create a new BottomSheet instance, specify the container the bottom sheet should append to, and define the content to be displayed in the bottom sheet.

const bottomSheet = new BottomSheet(
  "#myContainer",
  'Any HTML Content Here'
);

3. Open & close the Bottom Sheet.

bottomSheet.open();
bottomSheet.close(sheetId);

4. Customize the bottom sheet.

// CSS classes used to style the bottom sheet
bottomSheet.sheetClass = 'sheetClass';
bottomSheet.contentsClass = 'contentClass';
bottomSheet.backgroundClass = 'bgClass';
// height of the bottom sheet
bottomSheet.height = 100;
// start position of the bottom sheet
bottomSheet.startY = -50;
// close the bottom sheet by clicking the background
bottomSheet.backgroundClickExit = true;

5. Events.

// before open
bottomSheet.beforeOpen = (sheetID) => { console.log('before opened') }
// after open
bottomSheet.afterOpen = (sheetID) => { console.log('after opened') }
// before end
bottomSheet.beforeEnd = (sheetID) => { console.log('before closed') }
// after end
bottomSheet.afterEnd = (sheetID) => { console.log('after closed') }

Changelog:

01/05/2023

• v1.0.3

01/02/2023

• Added support for Esc KEY.