Example of how to use BravePositionDialog from BraveVue

brave_position_dialog_complete_example.vue

<template>
  <div>
    <div @click="$refs.bravedialog.show($event)" class="btn btn-lg btn-primary text-white px-4">
      <i class="bi bi-window"></i> Open Position Dialog</div>
    <BravePositionDialog ref="bravedialog" style="max-width:500px;" class="bg-light rounded shadow">
      <template  #header>
          <div class="p-2"><i class="bi bi-question-circle"></i> How it works</div>
      </template>
      <template #body>
         <div class="p-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam blanditiis explicabo nemo obcaecati vel sapiente aliquid, delectus laudantium suscipit harum voluptates, temporibus ex unde ipsam dolorem fuga nobis non autem!</div>
      </template>
      <template #footer>
        <div class="p-2">
            <div class="btn btn-primary btn-sm text-white" @click="$refs.bravedialog.hide()">Close</div>
        </div>
      </template>
    </BravePositionDialog>
  </div>
</template>

<script>
// @ is an alias to /src
import {BravePositionDialog} from "bravevue"

export default {
  name: 'Home',
  components: {
    BravePositionDialog
  }
}
</script>