mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 06:13:35 +09:00
first
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
### Avatar popover
|
||||
|
||||
Popovers can hold any type of content, including existing Vuero components. You
|
||||
can easily add a `<VAvatar />` inside your popover.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tippy>
|
||||
<VButton>Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
|
||||
<h4 class="dark-inverted">
|
||||
Alice C.
|
||||
</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</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">
|
||||
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small"/>
|
||||
<h4 class="dark-inverted">Alice C.</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VAvatar picture="/images/avatars/svg/vuero-1.svg" size="small" squared />
|
||||
<h4 class="dark-inverted">Erik K.</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VAvatar size="small" color="info" initials="JL"/>
|
||||
<h4 class="dark-inverted">John L.</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VAvatar size="small" color="h-purple" initials="SC" squared/>
|
||||
<h4 class="dark-inverted">Sara C.</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
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-->
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
user1:
|
||||
avatar: https://media.cssninja.io/content/avatars/19.jpg
|
||||
badge: /images/icons/flags/germany.svg
|
||||
username: Greta K.
|
||||
location: Los Angeles, CA
|
||||
position: Sales Manager
|
||||
bio: This is a nice user description that we can use as demo content.
|
||||
user2:
|
||||
avatar: /images/avatars/svg/vuero-1.svg
|
||||
badge: /images/icons/flags/united-states-of-america.svg
|
||||
username: Erik K.
|
||||
location: Las Begas, NV
|
||||
position: Product Manager
|
||||
bio: This is a nice user description that we can use as demo content.
|
||||
user3:
|
||||
avatar: https://media.cssninja.io/content/avatars/7.jpg
|
||||
badge: /images/icons/flags/united-states-of-america.svg
|
||||
username: Alice C.
|
||||
location: Los Angeles, CA
|
||||
position: Software Engineer
|
||||
bio: This is a nice user description that we can use as demo content.
|
||||
---
|
||||
|
||||
### Profile popover
|
||||
|
||||
Popovers can be used to display more complex information like a user profile.
|
||||
We-ve provided an example that uses an internal component to display a user
|
||||
profile. You can also make the popover interactive with the `interactive`
|
||||
prop.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const user = {
|
||||
avatar: 'https://media.cssninja.io/content/avatars/19.jpg',
|
||||
badge: '/images/icons/flags/germany.svg',
|
||||
username: 'Greta K.',
|
||||
location: 'Los Angeles, CA',
|
||||
position: 'Sales Manager',
|
||||
bio: 'This is a nice user description that we can use as demo content.',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tippy
|
||||
class="has-help-cursor"
|
||||
interactive
|
||||
:offset="[0, 30]"
|
||||
>
|
||||
<VAvatar :picture="user.avatar" />
|
||||
<template #content>
|
||||
<UserPopoverContent :user="user" />
|
||||
</template>
|
||||
</Tippy>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div>
|
||||
<Tippy class="mx-1" interactive :offset="[0, 30]">
|
||||
<VAvatar :picture="frontmatter.user1.avatar" />
|
||||
<template #content>
|
||||
<UserPopoverContent :user="frontmatter.user1" />
|
||||
</template>
|
||||
</Tippy>
|
||||
|
||||
<Tippy class="mx-1" interactive :offset="[0, 30]">
|
||||
<VAvatar :picture="frontmatter.user2.avatar" />
|
||||
<template #content>
|
||||
<UserPopoverContent :user="frontmatter.user2" />
|
||||
</template>
|
||||
</Tippy>
|
||||
|
||||
<Tippy class="mx-1" interactive :offset="[0, 30]">
|
||||
<VAvatar :picture="frontmatter.user3.avatar" />
|
||||
<template #content>
|
||||
<UserPopoverContent :user="frontmatter.user3" />
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
102
documentation/plugins/popover/popover-icon-documentation.md
Normal file
102
documentation/plugins/popover/popover-icon-documentation.md
Normal file
@@ -0,0 +1,102 @@
|
||||
### Icon popover
|
||||
|
||||
Popovers can hold any type of content, including existing Vuero components. You
|
||||
can easily add a `<VIconBox />` inside your popover.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tippy>
|
||||
<VButton>Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VIconBox size="small" color="primary">
|
||||
<i class="lnil lnil-crown-alt-1" />
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">
|
||||
Hover Popover
|
||||
</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</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">
|
||||
<VIconBox size="small" color="primary">
|
||||
<VIcon icon="lucide:x"/>
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">Hover Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VIconBox size="small" color="info">
|
||||
<i class="lnil lnil-crown-alt-1"></i>
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">Hover Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VIconBox size="small" color="orange">
|
||||
<i class="lnil lnil-crown-alt-1"></i>
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">Hover Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy>
|
||||
<VButton class="mx-1">Hover me!</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<VIconBox size="small" color="green">
|
||||
<i class="lnil lnil-crown-alt-1"></i>
|
||||
</VIconBox>
|
||||
<h4 class="dark-inverted">Hover Popover</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
140
documentation/plugins/popover/popover-position-documentation.md
Normal file
140
documentation/plugins/popover/popover-position-documentation.md
Normal file
@@ -0,0 +1,140 @@
|
||||
### Popover positions
|
||||
|
||||
`<Tippy />` popovers can have different positions. Use the `placement` props to
|
||||
set your popover placement. Available options are `top`, `top-end`, `bottom`,
|
||||
`bottom-end`, `left`, `left-end`, `right` and `right-end`.
|
||||
|
||||
<!--code-->
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Tippy placement="top">
|
||||
<VButton>Top</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">
|
||||
Top
|
||||
</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--/code-->
|
||||
|
||||
<!--example-->
|
||||
|
||||
<div class="buttons">
|
||||
<Tippy placement="top">
|
||||
<VButton class="mx-1">Top</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Top</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="top-end">
|
||||
<VButton class="mx-1">Top End</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Top End</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="bottom">
|
||||
<VButton class="mx-1">Bottom</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Bottom</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="bottom-end">
|
||||
<VButton class="mx-1">Bottom End</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Bottom End</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="left">
|
||||
<VButton class="mx-1">Left</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Left</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="left-end">
|
||||
<VButton class="mx-1">Left End</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Left End</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="right">
|
||||
<VButton class="mx-1">Right</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Right</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
<Tippy placement="right-end">
|
||||
<VButton class="mx-1">Right End</VButton>
|
||||
<template #content>
|
||||
<div class="v-popover-content is-text">
|
||||
<div class="popover-head">
|
||||
<h4 class="dark-inverted">Right End</h4>
|
||||
</div>
|
||||
<div class="popover-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Tippy>
|
||||
</div>
|
||||
|
||||
<!--/example-->
|
||||
Reference in New Issue
Block a user