shishirraven

<BraveDialog ref="bravedialog" dialogwidth="500px">
  <template #dialog-heading>
     <img class="me-3" alt="Vue logo" width="30px;" src="../assets/logo.png"> VueJS Dialog
  </template>
  <template #dialog-body>
    <div class="p-4">This is a BraveVue Dialog VueJS Component</div>
  </template>
  <template #footer>
    <div class="btn btn-primary text-white m-4" @click="$refs.bravedialog.hide()">Close</div>
  </template>

shishirraven

<BraveDialog ref="bravedialog" dialogwidth="500px">
  <template #dialog-heading>
      Your heading...
  </template>
  <template #dialog-body>
    Your body content...
  </template>
  <template #footer>
    your footer content... 
  </template>

shishirraven

<template>
  <div>

    <BraveDialog ref="bravedialog" dialogwidth="500px">
      <template #dialog-heading>
         <img class="me-3" alt="Vue logo" width="30px;" src="../assets/logo.png"> VueJS Dialog
      </template>
      <template #dialog-body>
        <div class="p-4">This is a BraveVue Dialog VueJS Component</div>
      </template>

shishirraven

<div @click="$refs.bravedialog.show($event)" class="btn btn-lg btn-primary text-white px-4">
  <i class="bi bi-window"></i> Open 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>

shishirraven

<BravePositionDialog ref="bravedialog" style="max-width:500px;" class="bg-light rounded shadow">
  <template  #header>
      Header Text...
  </template>
  <template #body>
     Body Text ...
  </template>
  <template #footer>
   Footer Text ...
  </template>

shishirraven

 <template #footer>
    <div class="p-2">
        <div class="btn btn-primary btn-sm text-white" 
        @click="$refs.bravedialog.hide()"
        >Close</div>
    </div>
  </template>

shishirraven

<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>

shishirraven

<div>
  <h1> Embed done from BraveGistEmbed Component <h1>
</div>

shishirraven

<template>
  <div>
    <BraveGistEmbed url="https://gist.github.com/shishirraven/de437adec76659671c4b6d2d45630375"/>
  </div>
</template>
<script>
// @ is an alias to /src
import BraveGistEmbed from "@/components/BraveGistEmbed"
export default {
  name: 'Home',

shishirraven

<template>
  <div>
    <BraveDropMenu class="me-3">
      <template #button>
        <div role="button" class="btn btn-primary text-white px-3 "> <i class="bi bi-plus-lg"></i> Button <i class="bi bi-chevron-down"></i></div>
      </template>
      <template #menu>
        <div class="list-group bg-white shadow" style="min-width:200px;" >
          <div role="button" class="list-group-item list-group-item-action"><i class="bi me-1 bi-person-plus"></i> A second link item</div>
          <div role="button" class="list-group-item list-group-item-action"><i class="bi me-1 bi-envelope-plus"></i> A second link item</div>