API & PlaygroundVanillacreateBottomSheet

Interface

createBottomSheet is a function that creates a new instance of a bottom sheet.
To control the bottom sheet, you can pass options to it, and use the return value of the function.
For more information on the options and methods available, see the BottomSheetCore.

createBottomSheet: (props: BottomSheetCoreProps) => BottomSheet;

Example

import { createBottomSheet } from "@plainsheet/core";
 
const bottomSheet = createBottomSheet({
  content: `<article>
            <h2>Bottom Sheet</h2>
            <button
                id="close"
            > Close </button>
        </article>`,
  // ...other `BottomSheetCoreProps`
});
 
document
  .querySelector("#close")
  ?.addEventListener("click", () => bottomSheet.close());
 
bottomSheet.mount();
bottomSheet.open();
Customizing AnimationCommands
;