The following section explains the required steps to build the simple Avatar component with its basic usage in step-by-step procedure.
Vue CLI
to setup your vue applications. To install Vue CLI use the following command.npm install -g @vue/cli
npm install -g @vue/cli-init
vue init webpack-simple quickstart
cd quickstart
npm install
Avatar
packages using below command.npm install @syncfusion/ej2-layouts --save
Add an HTML span element with e-avatar
class into the <template>
section of the App.vue
file in src
directory.
<template>
<div id="app">
<span class="e-avatar">GR</span>
</div>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {};
}
}
</script>
Add Avatar component’s styles as given below in <style>
section of the App.vue
file.
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
</style>
We can also use CRG to generate combined component styles.
Now run the npm run dev
command in the console, it will build your application and open in the browser.
The following example shows a basic Avatar.
<template>
<div id='element'>
<span class="e-avatar e-avatar-xlarge"></span>
<span class="e-avatar e-avatar-large"></span>
<span class="e-avatar"></span>
<span class="e-avatar e-avatar-small"></span>
<span class="e-avatar e-avatar-xsmall"></span>
</div>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
#element {
display: block;
width: 300px;
margin: 130px auto;
border-radius: 3px;
justify-content: center;
}
.e-avatar {
background-image: url(./pic01.png);
margin: 2px;
}
</style>