Bottom Sheet ​

A Bottom Sheet is a user interface component that slides up from the bottom of the screen to display content that complements the main screen. It can either be a full-screen or partially visible, allowing users to interact with the underlying content while still having access to the main screen. Bottom sheets are used to provide additional context, options, or functionality related to the main screen and can be dismissed by dragging it down or tapping outside of it.

Usage ​

Basic Usage ​

To use the VBottomSheet component, you can simply include it in your template like this:

With Header ​

To add header to the bottom sheet, add VBottomSheetHeader as child of VBottomSheet.

With Handle ​

To add handle to the bottom sheet, add VBottomSheetHandle as child of VBottomSheet.

With Footer ​

To add footer to the bottom sheet, add VBottomSheetFooter as child of VBottomSheet.

Menus ​

To add menus to the bottom sheet, add VBottomSheetMenus as child of VBottomSheet.

Selectable Menus ​

To add selectable menus to the bottom sheet, add VBottomSheetMenus and set v-model to a ref to it.

Multiple Selection Menus ​

You can also add multiple selection to bottom sheet menus by adding multiple props to the VBottomSheetMenus component.

Max Width ​

You can set max width of bottom sheet via maxWidth prop.

Hide Overlay ​

You can hide bottom sheet overlay by setting overlay prop value to false.

Multiple Bottom Sheet ​

Nested Bottom Sheet ​

Props ​

Events ​

To listen for the emit event in a parent component or another component, you can use the @ symbol followed by the event name. For example:

<script setup>
function handleModelValueUpdate(value) {
  // do something with the value passed from the child component
}
</script>

<template>
  <VBottomSheet @update:modelValue="handleModelValueUpdate">
    BottomSheet message
  </VBottomSheet>
</template>

<script setup>
function handleModelValueUpdate(value) {
  // do something with the value passed from the child component
}
</script>

<template>
  <VBottomSheet @update:modelValue="handleModelValueUpdate">
    BottomSheet message
  </VBottomSheet>
</template>

Slots ​

default ​

A slot for placing the content such as VBottomSheetHeader, VBottomSheetFooter, etc.

CSS Variables ​

:root  {
  --v-bottom-sheet-bg-color: var(--color-wite)
  --v-bottom-sheet-body-color: var(--color-gray-800);

  // handle
  --v-bottom-sheet-handle-width: 3rem;
  --v-bottom-sheet-handle-height: 8px;
  --v-bottom-sheet-handle-bg-color: var(--color-gray-300);
  --v-bottom-sheet-handle-border-radius: var(--border-radius-lg);
}

:root  {
  --v-bottom-sheet-bg-color: var(--color-wite)
  --v-bottom-sheet-body-color: var(--color-gray-800);

  // handle
  --v-bottom-sheet-handle-width: 3rem;
  --v-bottom-sheet-handle-height: 8px;
  --v-bottom-sheet-handle-bg-color: var(--color-gray-300);
  --v-bottom-sheet-handle-border-radius: var(--border-radius-lg);
}

Standalone Installation ​

You can also install the BottomSheet component individually via @morpheme/bottom-sheet package:

npm i @morpheme/bottom-sheet @morpheme/themes

npm i @morpheme/bottom-sheet @morpheme/themes

<script setup lang="ts">
import {BottomSheet, BottomSheetBody} from '@morpheme/bottom-sheet';
import '@morpheme/themes/src/morpheme/_bottom-sheet.scss'

// load dark mode styles if you want to support dark mode
// import '@morpheme/themes/src/morpheme/_bottom-sheet.dark.scss'
</script>

<template>
  <VBottomSheet>
    <VBottomSheetBody> Hello World </VBottomSheetBody>
  </BottomSheet>
</template>

<script setup lang="ts">
import {BottomSheet, BottomSheetBody} from '@morpheme/bottom-sheet';
import '@morpheme/themes/src/morpheme/_bottom-sheet.scss'

// load dark mode styles if you want to support dark mode
// import '@morpheme/themes/src/morpheme/_bottom-sheet.dark.scss'
</script>

<template>
  <VBottomSheet>
    <VBottomSheetBody> Hello World </VBottomSheetBody>
  </BottomSheet>
</template>

Storybook ​

View Storybook documentation here.