Skip to content

Commit 033fed4

Browse files
authoredAug 22, 2023
Merge pull request #1 from MeenaAlagiah/master
Adding the Vue Tab Getting Started sample
2 parents d3209a9 + 9d01240 commit 033fed4

File tree

10 files changed

+168
-1
lines changed

10 files changed

+168
-1
lines changed
 

‎README.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
1-
# getting-started-with-the-vue-tab-component
1+
# Getting Started with the Vue Tab Component
22
A quick start Vue project that shows how to add the Vue Tab component to a Vue application. It shows how to customize the header position, apply styles to the active header, render HTML elements and display the overflowing headers using the scroller and popup.
3+
4+
Refer to the following documentation to learn about the Vue Tab component:
5+
https://ej2.syncfusion.com/vue/documentation/tab/getting-started-vue-3
6+
7+
Check out this online example of the Vue Tab Component:
8+
https://ej2.syncfusion.com/vue/demos/#/material3/tab/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+
14+
To run this application, you need to clone the `getting-started-with-the-vue-tab-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": "^22.2.8",
13+
"@syncfusion/ej2-vue-navigations": "^22.2.7",
14+
"@syncfusion/ej2-vue-popups": "^22.2.7",
15+
"vue": "^3.3.4"
16+
},
17+
"devDependencies": {
18+
"@vitejs/plugin-vue": "^4.2.3",
19+
"vite": "^4.4.5"
20+
}
21+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script setup>
2+
import { TabComponent as EjsTab, TabItemsDirective as ETabitems, TabItemDirective as ETabItem}
3+
from "@syncfusion/ej2-vue-navigations";
4+
5+
const headerText0= {text: "ASP.NET"};
6+
const headerText1= {text: "ASP.NET MVC"};
7+
const content0= "ASP.NET is an open-source server-side web application framework designed for web development to produce " +
8+
"dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications ";
9+
const content1= "The ASP.NET MVC is a web application framework developed by Microsoft, which implements the " +
10+
"model-view-controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is ";
11+
</script>
12+
<template>
13+
<ejs-tab cssClass="tab-content e-fill" width="850" overflowMode="Popup">
14+
<e-tabitems>
15+
<e-tab-item :header="headerText0" :content="content0"></e-tab-item>
16+
<e-tab-item :header="headerText1" :content="content1"></e-tab-item>
17+
</e-tabitems>
18+
</ejs-tab>
19+
20+
<!-- Render Tab using HTML Elements -->
21+
22+
<!-- <ejs-tab cssClass="tab-content e-fill" width="850" overflowMode="Popup">
23+
<div class="e-tab-header">
24+
<div>HTML</div>
25+
<div>Java</div>
26+
<div>JavaScript</div>
27+
<div>VB.Net</div>
28+
<div>Xamarin</div>
29+
<div>ASP.NET</div>
30+
<div>ASP.NET MVC</div>
31+
<div>PHP</div>
32+
<div>Ruby</div>
33+
<div>C Sharp(C#)</div>
34+
<div>Python</div>
35+
<div>Perl</div>
36+
<div>SQL</div>
37+
</div>
38+
<div class="e-content">
39+
<div>HyperText Markup Language is the standard markup language used to create web pages.</div>
40+
<div>Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers.</div>
41+
<div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.</div>
42+
<div>The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also includes a command-line VB.NET compiler.</div>
43+
<div>Xamarin is a San Francisco, California based software company created in May 2011[3] by the engineers that created Mono,[4] Mono for Android and MonoTouch that are cross-platform implementations of the Common Language Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET). With a C#-shared codebase, developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share code across multiple platforms.[5] Xamarin has over 1 million developers in more than 120 countries around the World as of May 2015.</div>
44+
<div>ASP.NET is an open-source server-side web application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.</div>
45+
<div>The ASP.NET MVC is a web application framework developed by Microsoft, which implements the model-view-controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is proprietary.</div>
46+
<div>PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.</div>
47+
<div>Ruby is an interpreted, high-level, general-purpose programming language.It runs on a variety of platforms, such as Windows, Mac OS and UNIX.</div>
48+
<div>C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.</div>
49+
<div>Python was designed with an emphasis on code readability, and its syntax allows programmers to express their concepts in fewer lines of code.</div>
50+
<div>Perl is a general purpose, high level interpreted and dynamic programming language. Perl supports both the procedural and Object-Oriented programming.</div>
51+
<div>SQL gives you the ability to find necessary information fast and in a reliable way.</div>
52+
</div>
53+
</ejs-tab> -->
54+
</template>
55+
56+
<style>
57+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
58+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
59+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
60+
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
61+
62+
.tab-content .e-content .e-item {
63+
font-size: 12px;
64+
padding: 10px;
65+
text-align: justify;
66+
}
67+
</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

Whitespace-only changes.

‎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)
Please sign in to comment.