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>

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
modelValue	@model Modal's model value	boolean	-
noClose	Remove the close button	boolean	-
noPadding	Remove the padding on the container	boolean	-

Events

Event name	Properties	Description
close
open
update:model-value

Slots

Name	Description	Bindings
default	Slot content	close Function - close function