sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 3 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/Tooltips.vue
+66 -32
View File
@@ -1,38 +1,72 @@
<template>
<CRow>
<CCol>
<CCol :xs="12">
<CCard>
<CCardHeader>
<strong>Vue Tooltips</strong>
<strong>Vue Tooltips</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Tooltips example</h4>
<Example href="directives/tooltip.html">
<p class="text-medium-emphasis">
Tight pants next level keffiyeh
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
haven't heard of them.
Photo booth beard raw denim letterpress vegan messenger
bag stumptown. Farm-to-table seitan, mcsweeney's fixie
sustainable quinoa 8-bit american apparel
<CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
terry richardson vinyl chambray. Beard stumptown,
cardigans banh mi lomo thundercats. Tofu biodiesel
williamsburg marfa, four loko mcsweeney''s cleanse
vegan chambray. A really ironic artisan
<CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
scenester farm-to-table banksy Austin
<CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
freegan cred raw denim single-origin coffee viral.
</p>
</Example>
<h4 class="mt-4">Tooltips placements</h4>
<Example href="directives/tooltip.html">
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'top'}">Tooltip on top</CButton>
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'right'}">Tooltip on right</CButton>
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'bottom'}">Tooltip on bottom</CButton>
<CButton color="secondary" v-c-tooltip="{content: 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', placement: 'left'}">Tooltip on left</CButton>
</Example>
<p class="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<Example href="directives/tooltip.html">
<p class="text-medium-emphasis">
Tight pants next level keffiyeh
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
haven't heard of them. Photo booth beard raw denim letterpress
vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's
fixie sustainable quinoa 8-bit american apparel
<CLink v-c-tooltip="'Tooltip text'"> have a </CLink>
terry richardson vinyl chambray. Beard stumptown, cardigans banh
mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko
mcsweeney''s cleanse vegan chambray. A really ironic artisan
<CLink v-c-tooltip="'Tooltip text'"> whatever keytar </CLink>
scenester farm-to-table banksy Austin
<CLink v-c-tooltip="'Tooltip text'"> twitter handle </CLink>
freegan cred raw denim single-origin coffee viral.
</p>
</Example>
<p class="text-medium-emphasis small">
Hover over the links below to see tooltips:
</p>
<Example href="directives/tooltip.html">
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'top',
}"
>Tooltip on top</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'right',
}"
>Tooltip on right</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'bottom',
}"
>Tooltip on bottom</CButton
>
<CButton
color="secondary"
v-c-tooltip="{
content:
'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.',
placement: 'left',
}"
>Tooltip on left</CButton
>
</Example>
</CCardBody>
</CCard>
</CCol>
@@ -41,6 +75,6 @@
<script>
export default {
name: "Tooltips",
};
</script>
name: 'Tooltips',
}
</script>