Skip to content

Commit 26fb19e

Browse files
maheshtpsmaheshtps
authored
Merge pull request #1 from MeenaAlagiah/master
Adding the Vue Badge Getting Started sample
2 parents f911a6f + 45e4caa commit 26fb19e

File tree

10 files changed

+231
-1
lines changed

10 files changed

+231
-1
lines changed

‎README.md‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,13 @@
1-
# getting-started-with-the-vue-badge-component
1+
# Getting Started with the Vue Badge Component
22
A quick start Vue project that shows how to create a Vue application and add the Syncfusion Vue Badge component to it. It includes a code snippet for different shapes and types of badges. It also includes a code snippet for integrating the Badge with the other UI components.
3+
4+
Refer to the following documentation to learn about the Vue Badge component:
5+
https://ej2.syncfusion.com/vue/documentation/badge/vue-3-getting-started
6+
7+
Check out this online example of the Vue Badge Component:
8+
https://ej2.syncfusion.com/vue/demos/#/material3/badge/default.html
9+
10+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
11+
12+
### How to run this application?
13+
To run this application, you need to clone the `getting-started-with-the-vue-badge-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary vue packages into your current project using the `npm install` command and run your project using the `npm run dev` command.

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-buttons": "^23.2.4",
13+
"@syncfusion/ej2-vue-navigations": "^23.2.5",
14+
"@syncfusion/ej2-vue-notifications": "^23.2.5",
15+
"vue": "^3.3.8"
16+
},
17+
"devDependencies": {
18+
"@vitejs/plugin-vue": "^4.5.0",
19+
"vite": "^5.0.0"
20+
}
21+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<script setup>
2+
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
3+
import { ToolbarComponent as EjsToolbar, ItemsDirective as EItems, ItemDirective as EItem } from "@syncfusion/ej2-vue-navigations";
4+
</script>
5+
6+
<template>
7+
<div class="container_div badge-toolbar ">
8+
<ejs-toolbar id="toolbar" width="400">
9+
<e-items>
10+
<e-item prefixIcon="e-icons e-menu"></e-item>
11+
<e-item text="Notification"></e-item>
12+
<e-item type="Separator"></e-item>
13+
<e-item prefixIcon="e-icons e-search"></e-item>
14+
<e-item :template=" 'messageTemplate'">
15+
<template v-slot:messageTemplate>
16+
<div class="badge-block">
17+
<div class="message icons">
18+
<span class="e-badge e-badge-notification e-badge-overlap e-badge-primary">99</span>
19+
</div>
20+
</div>
21+
</template>
22+
</e-item>
23+
<e-item :template=" 'userTemplate'">
24+
<template v-slot:userTemplate>
25+
<div class="badge-block">
26+
<div class="user-profile icons">
27+
<span class="e-badge e-badge-notification e-badge-overlap e-badge-success">10</span>
28+
</div>
29+
</div>
30+
</template>
31+
</e-item>
32+
<e-item :template=" 'loveTemplate'">
33+
<template v-slot:loveTemplate>
34+
<div class="badge-block">
35+
<div class="love icons">
36+
<span class="e-badge e-badge-notification e-badge-overlap e-badge-info">43</span>
37+
</div>
38+
</div>
39+
</template>
40+
</e-item>
41+
</e-items>
42+
</ejs-toolbar>
43+
</div>
44+
<!-- <ejs-button cssClass="e-btn">Inbox
45+
<span class="e-badge e-badge-overlap e-badge-primary e-badge-dot
46+
e-badge-bottom"></span>
47+
</ejs-button> -->
48+
</template>
49+
50+
<style>
51+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
52+
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
53+
@import "../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css";
54+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
55+
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
56+
.e-btn
57+
{
58+
position: relative;
59+
}
60+
.container_div.badge-toolbar {
61+
overflow: auto;
62+
display: table;
63+
margin: auto;
64+
margin-top: 117px;
65+
padding-top: 20px;
66+
padding-bottom: 20px;
67+
}
68+
69+
.e-icons {
70+
font-size: 20px;
71+
font-weight: bolder;
72+
}
73+
74+
@media only screen and (max-width: 550px) {
75+
.container_div.badge-toolbar #toolbar .header {
76+
display: none;
77+
}
78+
79+
.material .container_div.badge-toolbar .e-toolbar .e-toolbar-items:first-child > .e-toolbar-item:last-child {
80+
margin-right: 9px;
81+
}
82+
83+
.bootstrap .container_div.badge-toolbar .e-toolbar .e-toolbar-items:first-child > .e-toolbar-item:last-child {
84+
margin-right: 10px;
85+
}
86+
}
87+
88+
.container_div.badge-toolbar .badge-block {
89+
position: relative;
90+
display: inline-block;
91+
margin: 12px 12px 10px 10px;
92+
width: 28px;
93+
height: 20px;
94+
}
95+
96+
.container_div.badge-toolbar .e-toolbar-items {
97+
align-items: center;
98+
}
99+
100+
.header {
101+
font-size: 18px;
102+
}
103+
104+
.icons {
105+
width: 20px;
106+
height: 20px;
107+
display: inline-block;
108+
}
109+
/* SVG Icons */
110+
.love {
111+
112+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.532.81c3.029 0 5.932 1.668 7.468 4.521 2.139-3.97 6.922-5.644 11.008-3.726 4.289 2.012 6.177 7.212 4.218 11.617C29.273 17.614 16 31.19 16 31.19 15.916 31.137 2.727 17.614.774 13.222-1.186 8.817.703 3.617 4.993 1.605A8.299 8.299 0 0 1 8.532.81z'/%3E%3C/svg%3E") no-repeat 100% 100%;
113+
}
114+
115+
.message {
116+
position: relative;
117+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M0 5.126h.024l7.547 7.393 8.405 8.252 8.405-8.252 7.547-7.393H32v22.6H0zm1.902-.852h28.195l-7.048 5.929L16 16.132l-7.049-5.929z'/%3E%3C/svg%3E") no-repeat 100% 100%;
118+
}
119+
120+
.user-profile {
121+
position: relative;
122+
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23a6a5a6' d='M8.772 18.363a11.978 11.978 0 0 0 7.229 2.416c2.71 0 5.214-.899 7.229-2.416 4.71.593 8.354 4.61 8.354 9.481V32H.416v-4.156c0-4.871 3.646-8.888 8.356-9.481zM16.001 0a8.727 8.727 0 1 1-.003 17.455A8.727 8.727 0 0 1 16.001 0z'/%3E%3C/svg%3E") no-repeat 100% 100%;
123+
}
124+
</style>

‎src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Install
30+
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31+
in your IDE for a better DX
32+
</p>
33+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34+
</template>
35+
36+
<style scoped>
37+
.read-the-docs {
38+
color: #888;
39+
}
40+
</style>

‎src/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
5+
createApp(App).mount('#app')

‎src/style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
3+
body {
4+
margin-left: 25px;
5+
margin-top: 25px;
6+
}
7+

‎vite.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
 (0)