@nextcloud/vueNcAvatar
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| url | Set a custom url to the avatar image either the url, user or displayName property must be defined | string | - | undefined |
| iconClass | Set a css icon-class for an icon to be used instead of the avatar. | string | - | undefined |
| user | Set the user id to fetch the avatar either the url, user or displayName property must be defined | string | - | undefined |
| showUserStatus | Whether or not to display the user-status | boolean | - | true |
| showUserStatusCompact | Whether or not to the status-icon should be used instead of online/away | boolean | - | true |
| preloadedUserStatus | When the user status was preloaded via another source it can be handed in with this property to save the request. If this property is not set the status will be fetched automatically. If a preloaded no-status is available provide this object with properties "status", "icon" and "message" set to null. | object | - | undefined |
| isGuest | Is the user a guest user (then we have to user a different endpoint) | boolean | - | false |
| displayName | Set a display name that will be rendered as a tooltip either the url, user or displayName property must be defined specify just the displayname to generate a placeholder avatar without trying to fetch the avatar based on the user id | string | - | undefined |
| size | Set a size in px for the rendered avatar | number | - | 32 |
| allowPlaceholder | Placeholder avatars will be automatically generated when this is set to true | boolean | - | true |
| disableTooltip | Disable the tooltip | boolean | - | false |
| disableMenu | Disable the menu | boolean | - | false |
| tooltipMessage | Declares a custom tooltip when not null Fallback will be the displayName requires disableTooltip not to be set to true | string | - | null |
| isNoUser | Declares username is not a user's name, when true. Prevents loading user's avatar from server and forces generating colored initials, i.e. if the user is a group | boolean | - | false |
| menuPosition | Choose the avatar menu alignment. Possible values are left, center, right. | string | - | 'center' |
| menuContainer | Selector for the popover menu container | string|object|Element|boolean | - | 'body' |
| ariaLabel | string | - | null |
Slots
| Name | Description | Bindings |
|---|---|---|
| icon | Icon slot |
Basic user avatar
vue
<NcAvatar user="willywonka" display-name="Willy Wonka" />
Avatar with image
vue
<NcAvatar
url="https://nextcloud.com/wp-content/themes/next/assets/img/common/nextcloud-square-logo.png"
/>
Avatar with material design icon
<template>
<NcAvatar>
<template #icon>
<AccountMultiple :size="20" />
</template>
</NcAvatar>
</template>
<script>
import AccountMultiple from 'vue-material-design-icons/AccountMultiple'
export default {
components: {
AccountMultiple,
},
}
</script>
Avatar with preloaded status
<template>
<NcAvatar user="janedoe"
display-name="Jane Doe"
:preloaded-user-status="status">
</NcAvatar>
</template>
<script>
export default {
data() {
return {
status: {
icon: '',
status: 'dnd',
message: 'Not busy',
},
}
},
}
</script>
Avatar for non-users
vue
<NcAvatar display-name="Robbie Hyeon-Jeong" :is-no-user="true" />
Avatar on complex background
<template>
<div class="avatar-background">
<NcAvatar class="avatar" :is-no-user="true" display-name="Cecilia Rohese" />
</div>
</template>
<style scoped>
.avatar-background {
width: 80px;
height: 60px;
background: linear-gradient(to bottom, #0057b8 0%, #0057b8 49.99%, #ffd700 50%, #ffd700 100%);
}
.avatar {
margin: 15px 25px;
}
</style>