Merge pull request #1 from MeenaAlagiah/master

Adding the Vue Tab Getting Started sample
SyncfusionExamples · Aug 22, 2023 · 033fed4 · 033fed4
2 parents d3209a9 + 9d01240
commit 033fed4
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,14 @@
-# getting-started-with-the-vue-tab-component
+# Getting Started with the Vue Tab Component
 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. 
+
+Refer to the following documentation to learn about the Vue Tab component: 
+https://ej2.syncfusion.com/vue/documentation/tab/getting-started-vue-3
+
+Check out this online example of the Vue Tab Component:
+https://ej2.syncfusion.com/vue/demos/#/material3/tab/default.html
+
+Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
+
+### How to run this application?
+
+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.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "myvueapp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-vue-buttons": "^22.2.8",
+    "@syncfusion/ej2-vue-navigations": "^22.2.7",
+    "@syncfusion/ej2-vue-popups": "^22.2.7",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { TabComponent as EjsTab, TabItemsDirective as ETabitems, TabItemDirective as ETabItem}
+from "@syncfusion/ej2-vue-navigations";
+
+const headerText0= {text: "ASP.NET"};
+const headerText1= {text: "ASP.NET MVC"};
+const content0= "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 ";
+const content1= "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 ";
+</script>
+<template>
+  <ejs-tab cssClass="tab-content e-fill" width="850" overflowMode="Popup">
+    <e-tabitems>
+      <e-tab-item :header="headerText0" :content="content0"></e-tab-item>
+      <e-tab-item :header="headerText1" :content="content1"></e-tab-item>
+    </e-tabitems>
+  </ejs-tab>
+
+<!-- Render Tab using HTML Elements -->
+
+<!-- <ejs-tab cssClass="tab-content e-fill" width="850" overflowMode="Popup">
+  <div class="e-tab-header">
+     <div>HTML</div>
+    <div>Java</div>
+   <div>JavaScript</div>
+    <div>VB.Net</div>
+    <div>Xamarin</div>  
+     <div>ASP.NET</div>
+    <div>ASP.NET MVC</div> 
+     <div>PHP</div>
+    <div>Ruby</div>
+    <div>C Sharp(C#)</div>
+    <div>Python</div>
+    <div>Perl</div>
+    <div>SQL</div> 
+  </div>
+  <div class="e-content">
+    <div>HyperText Markup Language is the standard markup language used to create web pages.</div>
+    <div>Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers.</div>
+    <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>
+    <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>
+    <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> 
+    <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>
+    <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>            
+    <div>PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.</div>
+    <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>
+    <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>
+    <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>
+    <div>Perl is a general purpose, high level interpreted and dynamic programming language. Perl supports both the procedural and Object-Oriented programming.</div>         
+    <div>SQL gives you the ability to find necessary information fast and in a reliable way.</div>    
+  </div>
+</ejs-tab> -->
+</template>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
+
+.tab-content .e-content .e-item {
+    font-size: 12px;
+    padding: 10px;
+    text-align: justify;
+}
+</style>
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/src/style.css b/src/style.css
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})