refactor: new project structure
This commit is contained in:
Łukasz Holeczek
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Bootstrap Popovers</strong>
|
||||
<div class="card-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/popovers" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn v-b-popover.hover="'I am popover content!'" title="Popover Title">
|
||||
Hover Me
|
||||
</b-btn>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="6">
|
||||
<div class="my-3 text-center">
|
||||
<b-btn id="popoverButton-open" variant="primary">Button</b-btn>
|
||||
|
||||
<b-popover show target="popoverButton-open" title="Popover">
|
||||
I start <strong>open</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
|
||||
<small>placement</small>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<b-row>
|
||||
<b-col md="4" class="py-4 text-center"
|
||||
v-for="placement in placements" :key="placement">
|
||||
<b-btn :id="'exPopover1-'+placement" variant="primary">
|
||||
{{ placement }}
|
||||
</b-btn>
|
||||
<b-popover :target="'exPopover1-'+placement"
|
||||
:placement="placement"
|
||||
title="Popover!"
|
||||
triggers="hover focus"
|
||||
:content="`Placement ${placement}`">
|
||||
</b-popover>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card class="d-sm-down-none"
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
|
||||
<small>via properties or slots</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover2" variant="primary">Using properties</b-btn>
|
||||
<b-popover target="exPopover2"
|
||||
title="Prop Examples"
|
||||
triggers="hover focus"
|
||||
content="Embedding content using properties is easy">
|
||||
</b-popover>
|
||||
</b-col>
|
||||
<b-col md="6" class="py-4 text-center">
|
||||
<b-btn id="exPopover3" variant="primary">Using slots</b-btn>
|
||||
<b-popover target="exPopover3" triggers="hover focus">
|
||||
<template slot="title">Content via Slots</template>
|
||||
Embedding content <span class="text-danger">using slots</span>
|
||||
affords you <em>greater <strong>control.</strong></em> and
|
||||
basic HTML support.
|
||||
</b-popover>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
|
||||
<small>show</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-sync" variant="primary">I have a popover</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="show = !show">Toggle Popover</b-btn>
|
||||
|
||||
<b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popover</strong>
|
||||
<small>open/close events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-event" variant="primary">I have a popover</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onOpen">Open</b-btn>
|
||||
<b-btn class="px-1" @click="onClose">Close</b-btn>
|
||||
</div>
|
||||
|
||||
<b-popover ref="popover1" target="popoverButton-event" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popover</strong>
|
||||
<small>enable/disable events</small>
|
||||
</div>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<b-btn id="popoverButton-disableevent" variant="primary">I have a popover</b-btn>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<b-btn class="px-1" @click="onEnable">Enable</b-btn>
|
||||
<b-btn class="px-1" @click="onDisable">Disable</b-btn>
|
||||
</div>
|
||||
|
||||
<b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</b-card>
|
||||
<b-card
|
||||
header-tag="header"
|
||||
footer-tag="footer">
|
||||
<div slot="header">
|
||||
<i class="fa fa-align-justify"></i> <strong>Popover</strong><small><code>v-b-popover</code>directive</small>
|
||||
</div>
|
||||
<b-row>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.top="'I am Top'"
|
||||
title="Popover!"
|
||||
variant="primary">Top</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.left="'I am Left'"
|
||||
title="Popover!"
|
||||
variant="primary">Left</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.right="'I am Right'"
|
||||
title="Popover!"
|
||||
variant="primary">Right</b-btn>
|
||||
</b-col>
|
||||
<b-col md="3" class="py-3 text-center">
|
||||
<b-btn v-b-popover.hover.bottom="'I am Bottom'"
|
||||
title="Popover!"
|
||||
variant="primary">Bottom</b-btn>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'popovers',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'topright', 'top', 'topleft',
|
||||
'bottomright', 'bottom', 'bottomleft',
|
||||
'righttop', 'right', 'lefttop',
|
||||
'rightbottom', 'left', 'leftbottom'
|
||||
],
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen () {
|
||||
this.$refs.popover1.$emit('open')
|
||||
},
|
||||
onClose () {
|
||||
this.$refs.popover1.$emit('close')
|
||||
},
|
||||
onEnable () {
|
||||
this.$refs.popover2.$emit('enable')
|
||||
},
|
||||
onDisable () {
|
||||
this.$refs.popover2.$emit('disable')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user