Skip to content

SEO-177281-Vue-External-Linking-Tab #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

SEO-177281-Vue-External-Linking-Tab #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 50 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,61 @@
# 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.
The [Vue Tabs](https://www.syncfusion.com/vue-components/vue-tabs?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples) component is a simple user interface (tabs UI) for organizing related content and occupying a compact space. 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
## Project prerequisites

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.

## Features and Benefits

### Scrollable tabs

The Vue Tabs component manages additional tabs efficiently using [scrollable tabs](https://ej2.syncfusion.com/vue/documentation/tab/adaptive#scrollable?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples) when there are a greater number of tabs than can be shown. This simplifies the design and aligns the tabs in a single line. Users can swipe left or right over the tab header area to scroll and make clearly visible the out-of-sight tabs in mobile.

### Pop-up mode

The [pop-up mode](https://ej2.syncfusion.com/vue/documentation/tab/adaptive#popup?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples) is another type of overflow mode in which a pop-up holds the additional tabs when there are a greater number of tabs than can be shown. You can view the out-of-sight tabs by exploring the pop-up mode.


### Tabs headers (label)

The tab bar has a good visual representation for segregating active tabs and inactive tabs. It has an enormous interaction area for navigation in mobile tab view. The tab headers can be icons, plain text, or both. The position of the icons can also be changed to the left, right, top, and bottom inside tab headers.

## Related links
[Learn More about Vue Tabs](https://www.syncfusion.com/vue-components/vue-tabs?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)

[Download Free Trial](https://www.syncfusion.com/downloads/vue?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)

[Pricing](https://www.syncfusion.com/sales/teamlicense?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)

[Documentation](https://ej2.syncfusion.com/vue/documentation/tab/getting-started?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)

[View Demos](https://github.com/SyncfusionExamples/getting-started-with-the-vue-tab-component?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)

[Community Forums](https://www.syncfusion.com/forums/vue-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)

[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/vue?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)

[Online example](https://ej2.syncfusion.com/vue/demos/#/bootstrap5/tab/default.html?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)

## About Syncfusion Vue Components

Syncfusion's [Vue Components](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples) library is the only suite that you will ever need to build an application since it contains over 80 high-performance, lightweight, modular, and responsive UI Components in a single package. In addition to Tabs, we provide popular Vue Components such as [Charts](https://www.syncfusion.com/vue-components/vue-charts?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [Grid](https://www.syncfusion.com/vue-components/vue-grid?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [Scheduler](https://www.syncfusion.com/vue-components/vue-scheduler?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [Diagram](https://www.syncfusion.com/vue-components/vue-diagram?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), and [Word Processor](https://www.syncfusion.com/vue-components/vue-word-processor?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples).


### About Syncfusion
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1800+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [Angular](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [React](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [Vue](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples),[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" />

<p align="center">
<a href="mailto:[email protected]?Subject=Syncfusion Vue Tabs - GitHub" target="_top">[email protected]</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=vue-tabs-github-samples)">www.syncfusion.com</a> | Toll Free: 1-888-9 DOTNET <br>
</p>