The easiest multi-platform SPA framework.
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/bottomsheet@1.0.3/dist/frontle_bottomsheet.min.js"></script>
<!-- sourcemap
https://cdn.jsdelivr.net/npm/@frontle/bottomsheet@1.0.3/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