frontle-bottomsheet v2.0.1

Frontle BottomSheet

BottomSheet UI in Frontle

// at css file
.testBottomSheetContents{
    font-size: 16px;
}
.testBottomSheetContents1{
    color: black;
}

// at js file
import {BottomSheet} from "../../browser_modules/frontle-bottomsheet/bottomSheet.js";

let bottomSheet = new BottomSheet(`
    <div>this is a bottomSheet<div>
`);
bottomSheet.sheetContentsClass = 'testBottomSheetContents testBottomSheetContents1';
bottomSheet.start = () => {
    console.log('bottom sheet start!');
}
bottomSheet.open();

Installation

How to install from Frontle

$ frontle install frontle-bottomsheet

Function

new bottomSheet(html)

Create a bottom sheet object

let bottomSheet = new BottomSheet(`
    <div>this is a bottomSheet<div>
`);

bottomSheet.CSSClass

Set the css class of a bottom sheet

bottomSheet.sheetClass = 'css_class_name';
bottomSheet.sheetContentsClass = 'css_class_name';
bottomSheet.sheetBackgroundClass = 'css_class_name';

bottomSheet.height

Set bottom sheet height

bottomSheet.height = 50; // 50vh

bottomSheet.startY

Set bottom sheet start y position

bottomSheet.startY = 0; // 0vh

bottomSheet.backgroundClickExit

Set whether to end the bottom sheet when you click on the bottom sheet background

bottomSheet.backgroundClickExit = 'true';

bottomSheet.awake

This lifecycle runs before modal rendering.

bottomSheet.awake () => { console.log('before rendering') }

bottomSheet.start

This lifecycle runs after modal rendered

bottomSheet.start () => { console.log('after rendering') }

bottomSheet.end

This lifecycle runs before modal termination

bottomSheet.end () => { console.log('end') }

bottomSheet.open()

Open bottom sheet

bottomSheet.open();

bottomSheet.close()

Close bottom sheet

bottomSheet.close();

People

The original author of frontle-bottomsheet is MushStory

License

MIT