OrionAvatar

<o-avatar> is used to represent people or object like an article thumbnail for example.

It will display the first letter of the name prop in case the avatar prop is undefined.

Additionally if you provide the update-function prop, it will automatically add an upload icon to trigger this function.

TIP

Although this component is very simple, it can handle complex cases depending on your application architecture.

More on that below in the Edges cases section.

Usage

Shapes & Contain

Define the shape of the avatar with the square prop and how the image should be displayed with the contain prop.

<template>
	<div class="row row--grid row--middle">
		<div class="col-sm-4">
			<o-avatar
				square
				:contain="contain"
				avatar="https://picsum.photos/id/1074/200/150"/>
		</div>

		<div class="col-sm-4">
			<o-avatar
				:contain="contain"
				avatar="https://picsum.photos/id/1074/200/150"/>
		</div>

		<div class="col-sm-4">
			<o-toggle
				v-model="contain"
				label="Toggle contain"/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const contain = ref(false);
</script>

Update function

You can update the avatar image directly from the component by implementing the update-function prop.

Refreshing the image on update

Depending on how your avatar or thumbnail are managed, you may have the same url for the image even after updating it. If this is the case the image won't change in the component which is the normal behavior.

To fix this we provide the nb-avatar-updates prop.

It must be a number that you should increment after each update so the image will be refreshed.

<template>
	<div class="row row--center">
		<o-avatar
			name="Toto"
			:avatar="avatarUrl"
			:nb-avatar-updates="avatarUpdateIncrement"
			:update-function="update"/>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useNotif } from '@orion.ui/orion';

const avatarUrl = ref('https://picsum.photos/id/1011/200');
const avatarUpdateIncrement = ref(0);

function update () {
	useNotif.info('Create your update function');
	avatarUpdateIncrement.value++;
	avatarUrl.value = `https://picsum.photos/200?random=${avatarUpdateIncrement.value}`;
}
</script>

Playground

T
<template>
	<div class="row row--center">
		<o-avatar
			v-bind="state"
			:avatar="avatar"
			:update-function="update"/>
	</div>

	<hr>

	<div class="row row--gutter row--middle">
		<div class="col-sm-4">
			<o-input
				v-model="state.name"
				label="Name"
				clearable/>
		</div>
		<div class="col-sm-4">
			<o-input
				v-model="state.tooltip"
				label="Tooltip text"
				clearable/>
		</div>
		<div class="col-sm-4">
			<size-selection v-model="state.size"/>
		</div>
		<div class="col-sm-4">
			<color-selection v-model="state.color"/>
		</div>
		<div class="col-sm-4">
			<o-toggle
				v-model="state.square"
				label="Square"/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';
import { useNotif } from '@orion.ui/orion';

const avatar = computed(() => {
	return state.color === 'image' ? 'https://picsum.photos/id/1011/200' : undefined;
});

const state = reactive({
	size: 'md'as Orion.Size,
	color: 'info' as Orion.Color & 'image',
	square: false,
	tooltip: 'Update your avatar',
	name: 'Toto',
});

function update () {
	useNotif.info('Create your update function');
}
</script>

AvatarSquare AvatarUpdate AvatarPlayground

Edge cases

Like we explained before the usage can be very simple, just by providing an url for the avatar prop and a string for the name prop as a fallback.

But let's take a different example where the avatar is stored in a database and can be displayed with its id. In this case you can provide a number for the avatar prop and a string for the root-url prop. Then the component will automatically detect it and recreate the right url by concatenating both prop.

This can also be the case when the avatar is retrieved as a JSON object, you can directly use it for the avatar prop, it just need an id key.

Props

Name
avatar{id: number} | number | string = undefined
colorOrion.Color = 'brand'
containboolean = false
namestring = ''
nbAvatarUpdatesnumber = 0
rootUrlstring = '/avatar/'
sizenumber | Orion.Size = 'md'
squareboolean = false
tooltipstring = undefined
updateFunctionFunction = undefined
MIT Licensed | Copyright © 2023-present Orion UI