Skip to content

Instantly share code, notes, and snippets.

View shishirraven's full-sized avatar
🖥️
Coding

Shishir Raven shishirraven

🖥️
Coding
8 followers · 16 following
View GitHub Profile
@shishirraven
shishirraven / EmbedExample.html
Created January 10, 2022 00:48
<div>
<h1> Embed done from BraveGistEmbed Component <h1>
</div>
@shishirraven
shishirraven / brave_position_dialog_complete_example.vue
Created January 10, 2022 00:35
Example of how to use BravePositionDialog from BraveVue
<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
shishirraven / adding_hide_button.vue
Created January 9, 2022 21:43
<template #footer>
<div class="p-2">
<div class="btn btn-primary btn-sm text-white"
@click="$refs.bravedialog.hide()"
>Close</div>
</div>
</template>
@shishirraven
shishirraven / BravePositionDialogSlots.vue
Created January 9, 2022 21:32
<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
shishirraven / BravePositionDialog.vue
Created January 9, 2022 20:42
<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
shishirraven / complete_dialog_example.vue
Created January 9, 2022 19:24
<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
shishirraven / dialogtemplate.vue
Created January 9, 2022 19:17
<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
shishirraven / dialog.html
Last active January 9, 2022 18:40
Brave Dialog Example
<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>