@solb/bottom-sheet

Bottomsheet 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.

!pc_preiview

!mobile_preview

Installation

$3

``npm i @solb/bottom-sheet`

`import "@solb/bottom-sheet"; import "@solb/bottom-sheet/style/style.css";`

`$3`

`Usage`

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


Props
$3
Title of bottomsheet

`html ...`

`$3`

Default vh(viewport height) of bottomsheet If this value is not present, the default is determined by calculating the height.

`html ...`

`$3`

Adds style to the main of bottomsheet

`html

Methods

$3

Opens the bottomsheet

$3

Opens the bottomsheet in full screen.

$3

Closes the bottomsheet

$3

Opens an already opened bottom sheet in full screen.

@solb/bottom-sheet

Bottomsheet 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)

!pc_preiview

!mobile_preview

Installation

$3

``npm i @solb/bottom-sheet`

`import "@solb/bottom-sheet"; import "@solb/bottom-sheet/style/style.css";`

`$3`

`Usage`

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


Props
$3
Title of bottomsheet

`html ...`

`$3`

Default vh(viewport height) of bottomsheet If this value is not present, the default is determined by calculating the height.

`html ...`

`$3`

Adds style to the main of bottomsheet

`html

Methods

$3

Opens the bottomsheet

$3

Opens the bottomsheet in full screen.

$3

Closes the bottomsheet

$3

Opens an already opened bottom sheet in full screen.