You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# How to Add Syncfusion Blazor Tabs Component to a Blazor Server App
2
2
3
-
The [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples) is a simple user interface (tabs UI) for organizing related content and occupying a compact space. A quick overview on how to create and configure the Syncfusion Blazor Tabs component in a Blazor server app using Visual Studio 2019. The Blazor Tabs component is a content panel to show multiple contents in a compact space, one at a time. In this video, you will learn how to add a simple Blazor Tabs component to a Blazor server app. You will see how to change the tab header position as well as how to set styles to the active tab header. Finally, you will learn how to add contents using a template and how to set a display mode to the Blazor Tabs component.
3
+
The [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples) is a simple user interface (tabs UI) for organizing related content and occupying a compact space. A quick overview on how to create and configure the Syncfusion Blazor Tabs component in a Blazor server app using Visual Studio 2019. The Blazor Tabs component is a content panel to show multiple contents in a compact space, one at a time. In this video, you will learn how to add a simple Blazor Tabs component to a Blazor server app. You will see how to change the tab header position as well as how to set styles to the active tab header. Finally, you will learn how to add contents using a template and how to set a display mode to the Blazor Tabs component.
4
4
5
5
## Project pre-requisites
6
6
Make sure that you have the compatible versions of Visual Studio 2019 and .NET Core SDK latest version(3.1.2) in your machine before starting to work on this project.
@@ -13,60 +13,60 @@ To run this application, you need to first clone the create-blazor-tabs-componen
13
13
14
14
### Animation
15
15
16
-
Navigate among tabs with nice, built-in [animation](https://blazor.syncfusion.com/documentation/tabs/animations?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples) effects (e.g., slide animation) when you click or tap a tab. The tab navigation happens on swiping within the content or tapping a tab header in a mobile tab view.
16
+
Navigate among tabs with nice, built-in [animation](https://blazor.syncfusion.com/documentation/tabs/animations?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples) effects (e.g., slide animation) when you click or tap a tab. The tab navigation happens on swiping within the content or tapping a tab header in a mobile tab view.
17
17
18
18
### Easy integration
19
19
20
20
It’s easy to integrate other Blazor components as content of the tab’s pane. The Blazor Tab control can also be integrated with other components such as Dialog and Card.
21
21
22
22
### Tab headers
23
23
24
-
The tab bar has good visual representation for segregating active tabs and inactive tabs. It has a large 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](https://blazor.syncfusion.com/documentation/tabs/header?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples).
24
+
The tab bar has good visual representation for segregating active tabs and inactive tabs. It has a large 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](https://blazor.syncfusion.com/documentation/tabs/header?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples).
25
25
26
26
## Pop-up mode
27
27
28
-
The [pop-up mode](https://blazor.syncfusion.com/documentation/tabs/responsive-modes#popup?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-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.
28
+
The [pop-up mode](https://blazor.syncfusion.com/documentation/tabs/responsive-modes#popup?utm_source=github&utm_medium=listing&utm_campaign=blazor-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.
29
29
30
30
### Nested tabs
31
31
32
32
Users can nest one tab within another tab to design a complex layout.
33
33
34
34
### Drag and drop
35
35
36
-
The Blazor Tabs control allows users to [drag and drop](https://blazor.syncfusion.com/documentation/tabs/drag-and-drop?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples) tabs to easily re-prioritize the tab item order.
36
+
The Blazor Tabs control allows users to [drag and drop](https://blazor.syncfusion.com/documentation/tabs/drag-and-drop?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples) tabs to easily re-prioritize the tab item order.
37
37
38
38
### Easy integration
39
39
40
40
It’s easy to integrate other Blazor components as content of the tab’s pane. The Blazor Tab control can also be integrated with other components such as Dialog and Card.
41
41
42
42
43
43
## Related links
44
-
[Learn More about Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples)
44
+
[Learn More about Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples)
[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples)
56
+
[Suggest a feature or report a bug](https://www.syncfusion.com/feedback/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples)
The Syncfusion's Blazor components library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Tabs, we provide popular Blazor Components such as DataGrid, Charts, Scheduler, Diagram, Word Processor, and more.
65
+
The Syncfusion's Blazor components library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Tabs, we provide popular Blazor Components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [Charts](https://www.syncfusion.com/blazor-components/blazor-charts?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), and more.
66
66
67
67
### About Syncfusion
68
68
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 27,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
69
69
70
-
Today, we provide 1700+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [React](https://www.syncfusion.com/react-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), and [MAUI(Preview)](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples),[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-github-samples)). and [MAUI(Preview)](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-navigations-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.
70
+
Today, we provide 1700+ components and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [React](https://www.syncfusion.com/react-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), and [MAUI(Preview)](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples),[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=blazor-tabs-github-samples)). and [MAUI(Preview)](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=blazor-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.
0 commit comments