Description

Bottom sheet UI available in Vanilla JS

Usage

import { BottomSheet } from "../../browser_modules/@frontle/bottomsheet/index.js";

const bottomSheet = new BottomSheet(
  "#app",
  '<button id="closeButton">close</button>'
);
bottomSheet.height = 100;
bottomSheet.startY = -50;
bottomSheet.beforeOpen = (sheetId) => {
  document.querySelector("#closeButton").onclick = () => {
    bottomSheet.close(sheetId);
  };
};
bottomSheet.open();

Install

Frontle

$ frontle install @frontle/bottomsheet --noBuild

Vanilla JS

<script src="https://cdn.jsdelivr.net/npm/@frontle/[email protected]/dist/frontle_bottomsheet.min.js"></script>
<!-- sourcemap 
https://cdn.jsdelivr.net/npm/@frontle/[email protected]/dist/frontle_bottomsheet.min.js.map
-->

API

new BottomSheet(parents, html)

Create a bottom sheet object

const bottomSheet = new BottomSheet(
  "#app",
  '<button id="closeButton">close</button>'
);

.sheetClass

.contentsClass

.backgroundClass

Set the css class of a bottom sheet

bottomSheet.sheetClass = 'cssClassName';
bottomSheet.contentsClass = 'cssClassName1 cssClassName2';
bottomSheet.backgroundClass = '';

.height

Set bottom sheet height

bottomSheet.height = 50;

.startY

Set bottom sheet start y position

bottomSheet.startY = 0;

.backgroundClickExit

Set whether bottom sheet can be closed by clicking on bottom sheet background

bottomSheet.backgroundClickExit = true;

.beforeOpen

This lifecycle is executed before the bottom sheet is opened

bottomSheet.beforeOpen = (sheetID) => { console.log('before opened') }

.afterOpen

This lifecycle is executed after the bottom sheet is opened

bottomSheet.afterOpen = (sheetID) => { console.log('after opened') }

.beforeEnd

This lifecycle is executed before the bottom sheet closes

bottomSheet.beforeEnd = (sheetID) => { console.log('before closed') }

.afterEnd

This lifecycle is executed after the bottom sheet is closed

bottomSheet.afterEnd = (sheetID) => { console.log('after closed') }

.open()

Open bottom sheet

const sheetID = await bottomSheet.open();

.close(sheetID)

Close bottom sheet

await bottomSheet.close(sheetID);

People

The original author of @frontle/bottomsheet is MushStory

License

MIT