refactor: template changes to implement new CCard syntax
This commit is contained in:
woothu
+51
-173
@@ -2,7 +2,7 @@
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
@@ -10,56 +10,58 @@
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>',
|
||||
active: true
|
||||
}"
|
||||
text="Hover me"
|
||||
/>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.click="{
|
||||
header: 'Popover!',
|
||||
content: 'I am showing on click and hiding on click outside tooltip!',
|
||||
placement: 'bottom',
|
||||
active: true
|
||||
}"
|
||||
>
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>',
|
||||
active: true
|
||||
}"
|
||||
text="Hover me"
|
||||
/>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol cols="4">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
variant="primary"
|
||||
v-c-popover.click="{
|
||||
header: 'Popover!',
|
||||
content: 'I am showing on click and hiding on click outside tooltip!',
|
||||
placement: 'bottom'
|
||||
}"
|
||||
>
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Popovers </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<div class="my-3">
|
||||
<CCardBody class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
@@ -79,116 +81,8 @@
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<!-- <CCard class="d-sm-down-none">
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
|
||||
<small>via properties or slots</small>
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol md="6" class="py-4 text-center">
|
||||
<CButton id="exPopover2" variant="primary">Using properties</CButton>
|
||||
<b-popover target="exPopover2"
|
||||
title="Prop Examples"
|
||||
triggers="hover focus"
|
||||
content="Embedding content using properties is easy">
|
||||
</b-popover>
|
||||
</CCol>
|
||||
<CCol md="6" class="py-4 text-center">
|
||||
<CButton id="exPopover3" variant="primary">Using slots</CButton>
|
||||
<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>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
|
||||
<small>show</small>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<CButton id="popoverButton-sync" variant="primary">I have a popover</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<CButton class="px-1" @click="show = !show">Toggle Popover</CButton>
|
||||
|
||||
<b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popover </strong>
|
||||
<small>open/close events</small>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<CButton id="popoverButton-event" variant="primary">I have a popover</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<CButton class="px-1" @click="onOpen">Open</CButton>
|
||||
<CButton class="px-1" @click="onClose">Close</CButton>
|
||||
</div>
|
||||
|
||||
<b-popover ref="popover1" target="popoverButton-event" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popover </strong>
|
||||
<small>enable/disable events</small>
|
||||
</CCardHeader>
|
||||
<div class="d-flex flex-column text-md-center">
|
||||
<div class="p-2">
|
||||
<CButton id="popoverButton-disableevent" variant="primary">I have a popover</CButton>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<CButton class="px-1" @click="onEnable">Enable</CButton>
|
||||
<CButton class="px-1" @click="onDisable">Disable</CButton>
|
||||
</div>
|
||||
|
||||
<b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
|
||||
Hello <strong>World!</strong>
|
||||
</b-popover>
|
||||
</div>
|
||||
</CCard> -->
|
||||
<!-- <CCard>
|
||||
<CCardHeader slot="header">
|
||||
<i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
|
||||
</CCardHeader>
|
||||
<CRow>
|
||||
<CCol md="3" class="py-3 text-center">
|
||||
<CButton v-b-popover.hover.top="'I am Top'"
|
||||
title="Popover!"
|
||||
variant="primary">Top</CButton>
|
||||
</CCol>
|
||||
<CCol md="3" class="py-3 text-center">
|
||||
<CButton v-b-popover.hover.left="'I am Left'"
|
||||
title="Popover!"
|
||||
variant="primary">Left</CButton>
|
||||
</CCol>
|
||||
<CCol md="3" class="py-3 text-center">
|
||||
<CButton v-b-popover.hover.right="'I am Right'"
|
||||
title="Popover!"
|
||||
variant="primary">Right</CButton>
|
||||
</CCol>
|
||||
<CCol md="3" class="py-3 text-center">
|
||||
<CButton v-b-popover.hover.bottom="'I am Bottom'"
|
||||
title="Popover!"
|
||||
variant="primary">Bottom</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCard> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -203,23 +97,7 @@ export default {
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
],
|
||||
show: false,
|
||||
counter: 0
|
||||
}
|
||||
},
|
||||
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')
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user