diff --git a/README.md b/README.md index ebf7398..65a68b6 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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. + +
+

+sales@syncfusion.com | www.syncfusion.com| Toll Free: 1-888-9 DOTNET
+