This is a bottomsheet created with pure JavaScript using Web Components.
npm install @solb/bottom-sheetBottomsheet component made with pure JavaScript. When used on the mobile web or app, it appears as a bottomsheet, and on the web it appears as a modal. (Demo)
This component is built with Web Components, offering the key advantage of universal usability. You can employ it across various frameworks or even without any framework. Therefore, you can integrate this bottom sheet seamlessly in different environments such as React, Vue, and more.
```
npm i @solb/bottom-sheet
``
import "@solb/bottom-sheet";
import "@solb/bottom-sheet/style/style.css";
``
Children elements to be included in the bottomsheet must be wrapped with the main tag.
Examples of usage in react, nextjs, and vue can be seen here 👋!
`html
type="button"
onclick="document.getElementById('testBottomSheet').openSheet()"
>
openSheet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
type="button"
onclick="document.getElementById('testBottomSheet').closeSheet()"
>
closeSheet
type="button"
onclick="document.getElementById('testBottomSheet').fullSheet()"
>
fullSheet
`
Title of bottomsheet
`html`
Default vh(viewport height) of bottomsheet
If this value is not present, the default is determined by calculating the height.
`html`
Adds style to the main of bottomsheet
`html``
Opens the bottomsheet
Opens the bottomsheet in full screen.
Closes the bottomsheet
Opens an already opened bottom sheet in full screen.