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">
    <h3 class="maz-text-center maz-mb-4">
      Your content
    </h3>
    <div class="maz-flex maz-flex-center">
      <MazBtn
        outline
        @click="isOpen = false"
      >
        Close Bottom Sheet
      </MazBtn>
    </div>
  </MazBottomSheet>

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

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

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
noClose		boolean	-	false
noPadding		boolean	-	false

Events

Event name	Properties	Description
close
open
update:model-value

Slots

Name	Description	Bindings
default