MazBottomSheet

MazBottomSheet is a standalone component like a simple dialog but at the bottom of screen

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

TIP

This component uses the <Teleport to="body"> with MazBackdrop, so you can implement this component anywhere and it inherits all its props

Basic usage

<template>
  <MazBtn @click="isOpen = true">Open Bottom Sheet</MazBtn>

  <MazBottomSheet v-model="isOpen">
    <p style="text-align: center">
      Place your content here
    </p>
  </MazBottomSheet>

  <script setup>
    import { ref } from 'vue'
    import MazBtn from 'maz-ui/components/MazBtn'
    import MazBottomSheet from 'maz-ui/components/MazBottomSheet'

    const isOpen = ref(false)
  </script>
</template>