Skip to content

SEO-177252 Angular Tabs External Linking #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.

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 4 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
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
61 changes: 56 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
# Getting Started with the Angular Tabs Component

A quick start Angular project that shows how to create and configure the Syncfusion Angular Tabs component in an Angular project. This project also includes a code snippet to change the tab header position and set styles to the active tab header, initialize the tab component using a template and HTML elements.

Examples: https://ej2.syncfusion.com/angular/demos/#/material/tab/default

Documentation: https://ej2.syncfusion.com/angular/documentation/tab/getting-started/
[Angular Tabs](https://www.syncfusion.com/angular-components/angular-tabs?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples) or Tab Panel component is a simple user interface (tabs UI) for organizing related content and occupying a compact space. A quick start Angular project that shows how to create and configure the Syncfusion Angular Tabs component in an Angular project. This project also includes a code snippet to change the tab header position and set styles to the active tab header, initialize the tab component using a template and HTML elements.

# Project pre-requisites

Expand Down Expand Up @@ -34,4 +30,59 @@ npm install

Run ng serve command for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

## Features and benefits

### Scrollable tabs

The Angular Tabs component manages additional tabs efficiently using scrollable tabs 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 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.

### Nested tabs

Users can nest one tab within another tab to design a complex layout.

### Drag and drop

The Angular Tabs control allows users to [drag and drop](https://ej2.syncfusion.com/angular/documentation/tab/drag-and-drop?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples) tabs to easily re-prioritize the tab item order. Also, it allows adding tabs dynamically from an external source such as a ListView, TreeView, etc.

### 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](https://ej2.syncfusion.com/angular/documentation/tab/header?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples) 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 Angular Tabs](https://www.syncfusion.com/angular-components/angular-tabs?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples)

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

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

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

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

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

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

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

[Video Tutorials](https://www.syncfusion.com/tutorial-videos/angular/tabs?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples)

## About Syncfusion Angular UI Components

Syncfusion's [Angular UI Components](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-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 Angular Components such as [DataGrid](https://www.syncfusion.com/angular-components/angular-grid?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [Charts](https://www.syncfusion.com/angular-components/angular-charts?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [Scheduler](https://www.syncfusion.com/angular-components/angular-scheduler?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [Diagram](https://www.syncfusion.com/angular-components/angular-diagram?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), and [Word Processor](https://www.syncfusion.com/angular-components/angular-word-processor?utm_source=github&utm_medium=listing&utm_campaign=angular-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=angular-tabs-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [Angular](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [React](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [Vue](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples) and [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-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 Angular Tabs - GitHub" target="_top">[email protected]</a> | <a href="https://www.syncfusion.com?utm_source=github&utm_medium=listing&utm_campaign=angular-tabs-github-samples)">www.syncfusion.com</a>| Toll Free: 1-888-9 DOTNET <br>
</p>