Skip to content

BottomSheet

Bottomheet works thanks to the atom Overlay, which, in turn, is based on the store overlay. BottomSheet molecule is a retractable container, which can contain some application elements such as the menu, displayed on a transparent background.

BottomSheet Supports blocking the scroll position just like in modal, so in addition, to avoid the width jump effect, set:

css
body {
  overflow-y: scroll;
}

Props

templateId
Indicates what element it is displayed with overlay
type:String
default:sheet
canClose
It can block the possibility of closing bottom-sheet by clicking outside its area
type:Boolean
default:true

Events

openMenu
Is designed to call a menu

Examples

BottomSheet
html
<btn @click="displaySample()" color="primary" text="Open BottomSheet" />
<bottom-sheet>
  <div class="py-2">
    <menu-item :iconfile="home" title="Menu item 1" to="/" />
    <menu-item @click="closeSlideOver()" :iconfile="home" title="Menu item 2" />
    <menu-item @click="closeSlideOver()" :iconfile="home" title="Menu item 3" />
    <separator size="xs" />
    <menu-item @click="closeSlideOver()" :iconfile="home" title="Menu item 4" />
  </div>
</bottom-sheet>
<overlay :canClose="true" />
ts
import { useOverlayStore } from '@riupress/ui'
import home from '../../../src/components/icons/IconHome.vue'
const useOverlay = useOverlayStore()
function displaySample() {
  useOverlay.show('sheet')
}
function closeModal() {
  useOverlay.updateShowTemplate(false)
  useOverlay.updateShow(false)
}

WARNING

The transparent layer or overlay is used with many components and therefore should be used once, globally, e.g. in a layout.