The following section explains the required steps to build the simple Badge component with its basic usage in step-by-step procedure.
System requirements for Syncfusion Vue UI components
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
Badge
packages using below command.npm install @syncfusion/ej2-notifications --save
Add an HTML span element with e-badge
class inside any wrapper element (h1)
into the <template>
section of the App.vue
file in src
directory.
<template>
<div id="app">
<h1>Badge Component <span class="e-badge">New</span></h1>
</div>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {};
}
}
</script>
Add Badge 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-notifications/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'>
<h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>
</div>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
#element {
display: flex;
width: 400px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
justify-content: center;
}
</style>