sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-27 00:06:00 +02:00
parent c7f687982d
commit e086d28946
19 changed files with 3459 additions and 1800 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Popovers.vue
+71 -23
View File
@@ -1,28 +1,76 @@
<template>
<CRow>
<CCol>
<CCard>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Popovers</strong>
<strong>Vue Popovers</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Vue popover example</h4>
<Example href="directives/popover.html#example">
<CButton
color="danger"
size="lg"
v-c-popover="{header: 'Popover title', content: 'And here\’s some amazing content. It’s very engaging. Right?', placement: 'right'}"
>
Click to toggle popover
</CButton>
</Example>
<h4 class="mt-4">Vue popovers four directions</h4>
<Example href="directives/popover.html#four-directions">
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Popover on top</CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Popover on right</CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Popover on bottom</CButton>
<CButton color="secondary" v-c-popover="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Popover on left</CButton>
</Example>
<Example href="directives/popover.html#example">
<CButton
color="danger"
size="lg"
v-c-popover="{
header: 'Popover title',
content:
'And here\’s some amazing content. It’s very engaging. Right?',
placement: 'right',
}"
>
Click to toggle popover
</CButton>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Popover</strong> <small>Four directions</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Four options are available: top, right, bottom, and left aligned.
Directions are mirrored when using CoreUI for Vue in RTL.
</p>
<Example href="directives/popover.html#four-directions">
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'top',
}"
>Popover on top</CButton
>
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'right',
}"
>Popover on right</CButton
>
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'bottom',
}"
>Popover on bottom</CButton
>
<CButton
color="secondary"
v-c-popover="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'left',
}"
>Popover on left</CButton
>
</Example>
</CCardBody>
</CCard>
</CCol>
@@ -31,6 +79,6 @@
<script>
export default {
name: "Popovers",
};
</script>
name: 'Popovers',
}
</script>