Vue Avatar - Material

Create avatar with different styles simply by usingMaterialAvatar component.

Demo

<template>
  <material-avatar img="https://bit.ly/31BDLda" size="xl" alt="Avatar" />
</template>

<script>
import MaterialAvatar from "@/components/MaterialAvatar.vue";
export default {
  components: { MaterialAvatar },
 };
</script>

1<template>
2  <material-avatar img="https://bit.ly/31BDLda" size="xl" alt="Avatar" />
3</template>
4
5<script>
6import MaterialAvatar from "@/components/MaterialAvatar.vue";
7export default {
8  components: { MaterialAvatar },
9 };
10</script>

Props Information

Name	Type	Default	Description
img*	String		Used to add image to `MaterialAvatar` component. It is a required prop.
alt	String		Used to add description to `MaterialAvatar` image.
size	'xs''sm''md''lg''xl''xxl'		Change the `MaterialAvatar` size.
borderRadius	'sm''md''lg''xl'		Used to change the `MaterialAvatar` border-radius size.
Circular	bool	false	Used to make the `MaterialAvatar` component circlular,
shadow	'none''sm''lg''xl'	none	Set a `box-shadow` for the `MaterialAvatar`.

Sizes

<template>
  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xs" circular />
  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="sm" circular />
  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="md" circular />
  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="lg" circular />
  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xl" circular />
  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
  
</template>

<script>
import MaterialAvatar from "@/components/MaterialAvatar.vue";
export default {
  components: { MaterialAvatar },
 };
</script>

1<template>
2  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xs" circular />
3  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="sm" circular />
4  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="md" circular />
5  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="lg" circular />
6  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xl" circular />
7  <material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
8  
9</template>
10
11<script>
12import MaterialAvatar from "@/components/MaterialAvatar.vue";
13export default {
14  components: { MaterialAvatar },
15 };
16</script>

Variants

<template>
<material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
<material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" border-radius="md" />
<material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" border-radius="lg" />

</template>

<script>
import MaterialAvatar from "@/components/MaterialAvatar.vue";
export default {
components: { MaterialAvatar },
 };
</script>

1<template>
2<material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" circular />
3<material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" border-radius="md" />
4<material-avatar img="https://bit.ly/31BDLda" alt="Avatar" size="xxl" border-radius="lg" />
5
6</template>
7
8<script>
9import MaterialAvatar from "@/components/MaterialAvatar.vue";
10export default {
11components: { MaterialAvatar },
12 };
13</script>