Contact Support
Prevent content swipe selection in EJ2 Vue Tab component
14 Dec 20247 minutes to read
The swipeMode
property in the Tab component allows users to navigate between tabs using swipe gestures, improving the overall navigation experience. It supports both touch and mouse inputs, enabling intuitive tab switching.
However, in certain cases, such as when a tab contains critical elements like a form, accidental swipes can disrupt the user’s workflow. For example, if a user is filling out a form and mistakenly swipes, the tab might change unexpectedly, potentially leading to unsaved data or interruptions.
To address this, you can customize the swipeMode
property based on the needs of the application. By adjusting this setting, you can balance smooth, intuitive navigation with protecting the user experience and safeguarding against accidental tab switches.
The following are the available swipeMode
options for the Tab component:
- Both - By default, this option allows the user to swipe between tabs using both touch and mouse actions.
- Touch - This option allows users to swipe between tabs using touch gestures only.
- Mouse - This option allows users to swipe between tabs using mouse gestures only.
- None - This disables both touch and mouse swipe actions, preventing any unintended tab switches.
<template>
<div id="app">
<ejs-tab id='element' swipeMode='None'>
<e-tabitems>
<e-tabitem :header='headerText0' :content="content0"></e-tabitem>
<e-tabitem :header='headerText1' :content="content1"></e-tabitem>
<e-tabitem :header='headerText2' :content="content2"></e-tabitem>
</e-tabitems>
</ejs-tab>
</div>
</template>
<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 headerText2 = { text: 'JavaScript' };
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 ' +
'and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor ' +
'to Microsoft\'s Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing ' +
'programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ' +
'ASP.NET components to process SOAP messages.';
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 ' +
'proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using ' +
'only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.';
const content2 = '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.[5] More recently, however, it has become common in ' +
'both game development and the creation of desktop applications.';
</script>
<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";
</style>
<template>
<div id="app">
<ejs-tab id='element' swipeMode='None'>
<e-tabitems>
<e-tabitem :header='headerText0' :content="content0"></e-tabitem>
<e-tabitem :header='headerText1' :content="content1"></e-tabitem>
<e-tabitem :header='headerText2' :content="content2"></e-tabitem>
</e-tabitems>
</ejs-tab>
</div>
</template>
<script>
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-vue-navigations';
export default {
name: "App",
components: {
'ejs-tab': TabComponent,
'e-tabitem': TabItemDirective,
'e-tabitems': TabItemsDirective
},
data: function () {
return {
headerText0: { text: 'ASP.NET' },
headerText1: { text: 'ASP.NET MVC' },
headerText2: { text: 'JavaScript' },
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 ' +
'and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor ' +
'to Microsoft\'s Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing ' +
'programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ' +
'ASP.NET components to process SOAP messages.',
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 ' +
'proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using ' +
'only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.',
content2: '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.[5] More recently, however, it has become common in ' +
'both game development and the creation of desktop applications.',
}
}
}
</script>
<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";
</style>