@nextcloud/vueNcUserBubble
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| avatarImage | Override generated avatar, can be an url or an icon class | string | - | undefined |
| user | Provide the user id if this is a user | string | - | undefined |
| displayName | Displayed label | string | - | |
| showUserStatus | Whether or not to display the user-status | boolean | - | false |
| url | Define the whole bubble as a link | string | - | undefined |
| open | Default popover state. Requires the UserBubble to have some content to render inside the popover | boolean | - | false |
| primary | Use the primary colour | boolean | - | false |
| size | This is the height of the component | number | - | 20 |
| margin | This is the margin of the avatar (size - margin = avatar size) | number | - | 2 |
Events
| Event name | Properties | Description |
|---|---|---|
| click | ||
| update:open |
Slots
| Name | Description | Bindings |
|---|---|---|
| title | ||
| default | Main Popover content on userbubble hover/focus |
General description
This component displays a user together with a small avatar in a grey bubble. It's possible to use an actual user's avatar, just an image/icon as a url or an icon-class, to link the bubble to e.g. a users profile and to show a popover on hover with e.g. the full user name handle / email address or something else.
This component has the following slot:
- a default slot which is for the content of the popover (this is passed to the popover component directly).
Examples
vue
<p>
Some text before <NcUserBubble user="admin" display-name="Admin Example" :url="'/test'">@admin@foreign-host.com</NcUserBubble> and after the bubble.
<NcUserBubble avatar-image="icon-group" display-name="test group xyz" :primary="true">Hey there!</NcUserBubble>
</p>
Example with title slot
vue
<template>
<NcUserBubble
:margin="4"
:size="30"
display-name="Administrator"
user="admin"
>
<template #title>
<a href="#" title="Remove user" class="icon-close" @click="alert" />
</template>
</NcUserBubble>
</template>
<style>
.icon-close {
display: block;
height: 100%;
}
</style>
NcUserBubbleDiv
Slots
| Name | Description | Bindings |
|---|---|---|
| trigger |