https://github.com/frontle-foundation/bottomsheet
Bottom sheet UI available in Vanilla JS
https://github.com/frontle-foundation/bottomsheet
bottom-sheet bottomsheet frontle javascript modal sheet vanilla-javascript
Last synced: 6 months ago
JSON representation
Bottom sheet UI available in Vanilla JS
- Host: GitHub
- URL: https://github.com/frontle-foundation/bottomsheet
- Owner: Frontle-Foundation
- License: mit
- Created: 2022-11-08T17:35:43.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-03T19:14:55.000Z (almost 3 years ago)
- Last Synced: 2025-04-01T18:51:53.531Z (6 months ago)
- Topics: bottom-sheet, bottomsheet, frontle, javascript, modal, sheet, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 107 KB
- Stars: 10
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
The easiest multi-platform SPA framework.
## Description
Bottom sheet UI available in Vanilla JS
## Usage
```javascript
import { BottomSheet } from "../../browser_modules/@frontle/bottomsheet/index.js";
const bottomSheet = new BottomSheet(
"#app",
'close'
);
bottomSheet.height = 100;
bottomSheet.startY = -50;
bottomSheet.beforeOpen = (sheetId) => {
document.querySelector("#closeButton").onclick = () => {
bottomSheet.close(sheetId);
};
};
bottomSheet.open();
```
## Install
**Frontle**
```shell
$ frontle install @frontle/bottomsheet --noBuild
```
**Vanilla JS**
```html
```
## API
#### new BottomSheet(parents, html)
Create a bottom sheet object
```javascript
const bottomSheet = new BottomSheet(
"#app",
'close'
);
```
#### .sheetClass
#### .contentsClass
#### .backgroundClass
Set the css class of a bottom sheet
```javascript
bottomSheet.sheetClass = 'cssClassName';
bottomSheet.contentsClass = 'cssClassName1 cssClassName2';
bottomSheet.backgroundClass = '';
```
#### .height
Set bottom sheet height
```javascript
bottomSheet.height = 50;
```
#### .startY
Set bottom sheet start y position
```javascript
bottomSheet.startY = 0;
```
#### .backgroundClickExit
Set whether bottom sheet can be closed by clicking on bottom sheet background
```javascript
bottomSheet.backgroundClickExit = true;
```
#### .beforeOpen
This lifecycle is executed before the bottom sheet is opened
```javascript
bottomSheet.beforeOpen = (sheetID) => { console.log('before opened') }
```
#### .afterOpen
This lifecycle is executed after the bottom sheet is opened
```javascript
bottomSheet.afterOpen = (sheetID) => { console.log('after opened') }
```
#### .beforeEnd
This lifecycle is executed before the bottom sheet closes
```javascript
bottomSheet.beforeEnd = (sheetID) => { console.log('before closed') }
```
#### .afterEnd
This lifecycle is executed after the bottom sheet is closed
```javascript
bottomSheet.afterEnd = (sheetID) => { console.log('after closed') }
```
#### .open()
Open bottom sheet
```javascript
const sheetID = await bottomSheet.open();
```
#### .close(sheetID)
Close bottom sheet
```javascript
await bottomSheet.close(sheetID);
```
## People
The original author of @frontle/bottomsheet is [MushStory](https://github.com/MushStory)
## License
[MIT](https://github.com/Frontle-Foundation/BottomSheet/blob/main/LICENSE)