mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 10:13:39 +09:00
first
This commit is contained in:
64
documentation/plugins/popover/popover-base-documentation.md
Normal file
64
documentation/plugins/popover/popover-base-documentation.md
Normal file
@@ -0,0 +1,64 @@
|
||||
### Text popover
|
||||
|
||||
Vuero ships with the `<Tippy />` component from the `VTippy` library. It lets
|
||||
you create any type of popover with custom content. You can set the trigger
|
||||
to be a click event using the `trigger="click"` prop.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="buttons">
|
||||
<Tippy>
|
||||
<VButton>Hover me!</VButton>
|
||||
<template #content>
|
||||
Tooltip content
|
||||
</template>
|
||||
</Tippy>
|
||||
|
||||
<Tippy trigger="click">
|
||||
<VButton>Click me!</VButton>
|
||||
<template #content>
|
||||
Tooltip content
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="buttons">
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Click Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eam
|
||||
tum adesse, cum dolor omnis absit</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy trigger="click">
|
||||
<VButton class="mx-1">Click me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Click Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Eam tum adesse, cum dolor omnis absit</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
Reference in New Issue
Block a user