Tab component is designed by considering WAI-ARIA standard. Tab is supported with ARIA Accessibility which is accessible by on-screen readers, and other assistive technology devices. The following list of attributes are added in the Tab.
Roles and Attributes | Functionalities |
---|---|
tablist |
This is set to role attribute in the Tab element that describes actual role of the element. |
tabpanel |
This is set to role attribute for the Tab content that describes the role for viewing the active content. |
presentation | This is set to role attribute for nested elements in the Tab. |
aria-orientation | It indicates the Tab header orientation. Default value of this attribute is horizontal . |
aria-activedescendant | It indicates the current active child of the Tab component. |
aria-haspopup | It indicates the popup mode in the Tab. The default value of this attribute is false. If popup mode is enabled, the attribute value is set to true. |
aria-disabled | It indicates the disabled state of the Tab. |
aria-selected | It indicates the selection state for Tab items. Active Tab is set to true for this attribute. |
aria-hidden | It indicates the hidden element of the Tab. |
aria-controls | It indicates the associated Tabpanel for the header. |
aria-labelledby | It indicates the associated Tab header for the content. |
By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the WAI-ARIA practices. Once focused on the active Tab element, you can use the following key combination for interacting with the Tab.
Key | Description |
---|---|
Left | Moves focus to the previous Tab. If focus is on the first Tab, the focus will not move to any Tab. |
Right | Moves focus to the next Tab. If focus is on the last Tab element, the focus will not move to any Tab. |
Enter or Space | Selects the Tab if it is not selected. Opens the popup dropdown icon if it is focussed. Select the Tab item as active when popup item is focussed. |
Esc(Escape) | Closes the popup if popup is in opened state. |
Down or Up | When the popup is open and focused, it will move to previous/next Tab items of the popup in the vertical direction. |
Home | Moves focus to the first Tab. |
End | Moves focus to the last Tab. |
Shift + F10 | If popup mode is enabled, it opens the popup when the Tab is focused. |
Delete | Deletes the Tab, if close button is enabled in Tab header. |
@using Syncfusion.EJ2.Navigations;
@{
var content0 = "HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web " +
"pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually " +
"engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web " +
"browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a " +
"website semantically along with cues for presentation, making it a markup language, rather than a programming language.";
var content1 = "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.";
var content2 = "Java is a set of computer software and specifications developed by Sun Microsystems, later acquired by Oracle " +
"Corporation, that provides a system for developing application software and deploying it in a cross-platform computing " +
"environment. Java is used in a wide variety of computing platforms from embedded devices and mobile phones to " +
"enterprise servers and supercomputers. While less common, Java applets run in secure, sandboxed environments to " +
"provide many features of native applications and can be embedded in HTML pages.";
var content3 = "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. The most recent version is VB 2012, which was released on August 15, 2012.";
var content4 = "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.";
var content5 = "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 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.";
var content6 = "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.";
var content7 = "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.";
}
<ejs-tab id="ej2Tab" heightAdjustMode="Auto" overflowMode="Popup">
<e-tab-tabitems>
<e-tab-tabitem header="ViewBag.headerText0" content="@content0"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerText1" content="@content1"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerText2" content="@content2"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerText3" content="@content3"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerText4" content="@content4"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerText5" content="@content5"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerText6" content="@content6"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerText7" content="@content7"></e-tab-tabitem>
</e-tab-tabitems>
</ejs-tab>
<style>
#container {
visibility: hidden;
max-width: 650px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-content .e-item {
font-size: 12px;
margin: 10px;
text-align: justify;
}
</style>
public ActionResult Index()
{
ViewBag.headerText0 = new TabHeader { Text = "HTML" };
ViewBag.headerText1 = new TabHeader { Text = "C Sharp(C#)" };
ViewBag.headerText2 = new TabHeader { Text = "Java" };
ViewBag.headerText3 = new TabHeader { Text = "VB.Net" };
ViewBag.headerText4 = new TabHeader { Text = "Xamarin" };
ViewBag.headerText5 = new TabHeader { Text = "ASP.NET" };
ViewBag.headerText6 = new TabHeader { Text = "ASP.NET MVC" };
ViewBag.headerText7 = new TabHeader { Text = "JavaScript" };
return View();
}