The easiest multi-platform SPA framework.

Description

Bottom sheet UI available in Vanilla JS

Usage

1import { BottomSheet } from "../../browser_modules/@frontle/bottomsheet/index.js";
2
3const bottomSheet = new BottomSheet(
4  "#app",
5  '<button id="closeButton">close</button>'
6);
7bottomSheet.height = 100;
8bottomSheet.startY = -50;
9bottomSheet.beforeOpen = (sheetId) => {
10  document.querySelector("#closeButton").onclick = () => {
11    bottomSheet.close(sheetId);
12  };
13};
14bottomSheet.open();

Install

Frontle

1$ frontle install @frontle/bottomsheet --noBuild

Vanilla JS

1<script src="https://cdn.jsdelivr.net/npm/@frontle/bottomsheet@1.0.3/dist/frontle_bottomsheet.min.js"></script>
2<!-- sourcemap 
3https://cdn.jsdelivr.net/npm/@frontle/bottomsheet@1.0.3/dist/frontle_bottomsheet.min.js.map
4-->

API

new BottomSheet(parents, html)

Create a bottom sheet object

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

.sheetClass

.contentsClass

.backgroundClass

Set the css class of a bottom sheet

1bottomSheet.sheetClass = 'cssClassName';
2bottomSheet.contentsClass = 'cssClassName1 cssClassName2';
3bottomSheet.backgroundClass = '';

.height

Set bottom sheet height

1bottomSheet.height = 50;

.startY

Set bottom sheet start y position

1bottomSheet.startY = 0;

.backgroundClickExit

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

1bottomSheet.backgroundClickExit = true;

.beforeOpen

This lifecycle is executed before the bottom sheet is opened

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

.afterOpen

This lifecycle is executed after the bottom sheet is opened

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

.beforeEnd

This lifecycle is executed before the bottom sheet closes

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

.afterEnd

This lifecycle is executed after the bottom sheet is closed

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

.open()

Open bottom sheet

1const sheetID = await bottomSheet.open();

.close(sheetID)

Close bottom sheet

1await bottomSheet.close(sheetID);

People

The original author of @frontle/bottomsheet is MushStory

License

MIT