@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
loading...
Example with title slot
loading...
NcUserBubbleDiv
Slots
| Name | Description | Bindings |
|---|---|---|
| trigger |